转做海外买手的网站,教务管理系统平台,东莞松山湖中心医院,电商设计就是网站设计吗watch是vue内部提供的一个用于侦听功能的更通用的方法#xff0c;其用来响应数据的变化#xff0c;通过特定的数据变化驱动一些操作。简言之#xff1a;当需要被watch监听的数据发生变化时就会被执行watch中的逻辑。实现数据的实时更新#xff01;
普通监听
template…watch是vue内部提供的一个用于侦听功能的更通用的方法其用来响应数据的变化通过特定的数据变化驱动一些操作。简言之当需要被watch监听的数据发生变化时就会被执行watch中的逻辑。实现数据的实时更新
普通监听
templatediv/div
/template
scriptexport default {data(){variable:null,},watch:{// 此处监听variable变量variable的值变化就会执行以下variable变量后的方法体variable(val){// 变化后需要执行的逻辑}}}
/script如上当监听到变量variable产生变化时会被页面侦听到并执行相应的的逻辑。在实际开发中所有需要被监听的变量都需要写在watch中这样可在监听到变量发生变化时执行相应的逻辑。
深度监听deep
普通变量的变化的侦听是使用以上方法当所需侦听的变量是对象时则不起作用这时就需要使用deep属性进行深度监听。如下所示
templatediv/div
/template
scriptexport 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}]})}}
}
/scriptbarDataChart是一个 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 的新值作为参数传递进去。
附完整代码
templatediv :classclassName :style{height:height,width:width} /
/templatescript
import * as echarts from echarts;
require(echarts/theme/macarons) // echarts theme
import resize from ./mixins/resizeconst 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
