Vue的watch功能：实现响应式数据更新

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。简言之：当需要被watch监听的数据发生变化时就会被执行watch中的逻辑。实现数据的实时更新！

普通监听

<template><div></div>
</template>
<script>export default {data(){variable:null,},watch:{// 此处监听variable变量，variable的值变化就会执行以下variable变量后的方法体variable(val){// 变化后需要执行的逻辑}}}
</script>

如上：当监听到变量variable产生变化时，会被页面侦听到并执行相应的的逻辑。在实际开发中，所有需要被监听的变量都需要写在watch中，这样可在监听到变量发生变化时执行相应的逻辑。

深度监听deep

普通变量的变化的侦听是使用以上方法，当所需侦听的变量是对象时则不起作用，这时就需要使用deep属性进行深度监听。如下所示：

<template><div></div>
</template>
<script>export default {data(){myObject:{value:''},},watch:{myObject:{// 此处监听myObject属性value变量handler(val){},deep:true}}}</script>

案例

先上代码：

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}]})}}
}
</script>

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 的新值作为参数传递进去。

附完整代码：

<template><div :class="className" :style="{height:height,width:width}" />
</template><script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'const animationDuration = 6000export 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}]})}}
}
</script>