Vue的watch功能：实现响应式数据更新 |
您所在的位置：网站首页 › vue监听vuex数据实时更新 › Vue的watch功能：实现响应式数据更新 |
|
watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。简言之：当需要被watch监听的数据发生变化时就会被执行watch中的逻辑。实现数据的实时更新！ 普通监听 export default { data(){ variable:null, }, watch:{ // 此处监听variable变量，variable的值变化就会执行以下variable变量后的方法体 variable(val){ // 变化后需要执行的逻辑 } } }如上：当监听到变量variable产生变化时，会被页面侦听到并执行相应的的逻辑。在实际开发中，所有需要被监听的变量都需要写在watch中，这样可在监听到变量发生变化时执行相应的逻辑。 深度监听deep普通变量的变化的侦听是使用以上方法，当所需侦听的变量是对象时则不起作用，这时就需要使用deep属性进行深度监听。如下所示： export default { data(){ myObject:{ value:'' }, }, watch:{ myObject:{ // 此处监听myObject属性value变量 handler(val){ }, deep:true } } } 案例先上代码： export default { props: { //prop定义要求使用该组件时需要绑定bar-chart进行传值 barDataChart:{ type: Object, required: true } }, data() { return { chart: null } }, //监听barChart中值的变化 watch:{ barDataChart:{ deep:true, handler(val){ this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.barDataChart) }, setOptions({work_days, hj_main_count, hj_right_count, hj_left_count, hj_main, hj_right, hj_left}) { this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: work_days, // name:'日期', nameLocation: 'middle', // 显示位置 nameTextStyle: { fontWeight: 'bold' // 字体加粗 }, axisTick: { alignWithLabel: true } }], yAxis: [ { type: 'value', axisTick: { show: false }, // 设置轴单位显示格式--------------- axisLabel: { formatter: '{value} 次' } }], series: [{ name: hj_main, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_main_count, animationDuration, itemStyle: { // 设置折线图样式 color: '#FFA500' // 设置折线的颜色为橙色 } }, { name: hj_right, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_right_count, animationDuration, itemStyle: { // 设置折线图样式 color: '#CD5C5C' // 设置折线的颜色为橙色 } }, { name: hj_left, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_left_count, animationDuration }] }) } } }barDataChart是一个 props 属性，它通过组件的父组件传递进来，并且是一个对象类型。当 chartData 发生变化时，watch 监听器会自动执行其中定义的逻辑。 barDataChart:{ type: Object, required: true }在watch中深度监听barChart中值的变化,当barDataChart值发生变化时，执行this.setOptions方法，并将val值作为参数传入。 //监听barChart中值的变化 watch:{ barDataChart:{ deep:true, handler(val){ this.setOptions(val) } } },在如上的监听器中，我们设置了 deep: true 选项，表示要深度监听 chartData 对象的变化。也就是说，当 chartData 内部的属性发生改变时，监听器也会触发。其中handler 是监听器的回调函数，它接收一个参数 val，表示 chartData 的新值。在这个回调函数中，当监听到数据变化时，我们要执行了组件的 setOptions 方法，并将 chartData 的新值作为参数传递进去。 附完整代码： import * as echarts from 'echarts'; require('echarts/theme/macarons') // echarts theme import resize from './mixins/resize' const animationDuration = 6000 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' }, //prop定义要求使用该组件时需要绑定bar-chart进行传值 barDataChart:{ type: Object, required: true } }, data() { return { chart: null } }, //监听barChart中值的变化 watch:{ barDataChart:{ deep:true, handler(val){ this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.barDataChart) }, setOptions({work_days, hj_main_count, hj_right_count, hj_left_count, hj_main, hj_right, hj_left}) { this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: work_days, // name:'日期', nameLocation: 'middle', // 显示位置 nameTextStyle: { fontWeight: 'bold' // 字体加粗 }, axisTick: { alignWithLabel: true } }], yAxis: [ { type: 'value', axisTick: { show: false }, // 设置轴单位显示格式--------------- axisLabel: { formatter: '{value} 次' } }], series: [{ name: hj_main, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_main_count, animationDuration, itemStyle: { // 设置折线图样式 color: '#FFA500' // 设置折线的颜色为橙色 } }, { name: hj_right, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_right_count, animationDuration, itemStyle: { // 设置折线图样式 color: '#CD5C5C' // 设置折线的颜色为橙色 } }, { name: hj_left, type: 'bar', stack: 'vistors', barWidth: '60%', data: hj_left_count, animationDuration }] }) } } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |