vue的计算属性，在使用react的时候，因为使用了JSX，这在一定程度上模糊了html代码与js代码的边界，html页面也是有js生成的，你可以在render函数的JSX代码中写入各种你想写的js代码，感觉是不是很爽，在vue中每个组件一定程度上市区分了html、javascript、css三者，所以在vue的模板中写js的代码可能不会那么的方便。
但是以上的限制，从一定程度上来说，使vue的组件代码可能会更可读一点，当然前提是要对vue的api比较的属性，因为vue的作者为我们做了很多，包括vue.computed,该属性的作用是，当组件接受到的值，或是要显示的值与目前现有的数据还存在一定的差距（需要通过一定的计算才能使用），最常见的如时间格式化，从后台之间获取的数据可能是一个时间戳，在显示的时候可不能显示时间戳，我们可以通过computed属性，将原始数据计算为需要的数据，并绑定到模板当中。
其实我在一开始的时候，对于watch属性用的不是很多，因为在vue内部数据与视图是双向绑定的，数据的改变会之间驱动视图的修改，那么监测数据的变化在那些场景下是有用的呢？
最近在一次将echarts组件用vue封装时感受到了他的用处，在echarts当中数据与视图并不是双向绑定的，为了实现数据的双向绑定，我使用watch,一下是封装的代码：
<template>
<div>
<div class="echarts" :id="chartId"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: "common-chart",
props: {
options: {
type: Object,
required: true,
default: function () {
return {
}
}
},
chartId: {
type: String,
required: true,
default: function () {
return 'chart'
}
}
},
data () {
return {
mychart: {}
}
},
watch: {
// 'options' :{
// handler:(val,oldVal)=>{
// console.log('数据发生了更新');
// console.dir(val);
// console.dir(oldVal);
// console.dir(this);
// },
// deep:true
// }
'options': function () {
console.log('数据发生了变化');
console.dir(this);
this.updateCharts();
}
},
methods: {
initCharts () {
let me = this;
var myChart = echarts.init(document.getElementById(me._props.chartId));
this.mychart = myChart;
this.updateCharts();
},
updateCharts () {
let me = this;
me.mychart.setOption(me._props.options);
}
},
mounted () {
let me = this;
me.initCharts();
window.addEventListener('resize', function () {
me.mychart.resize();
});
},
}
</script>
可以看到，代码中我通过检测通过props传如的options配置数据的变化，来触发echarts配置的更新操作，在其中还发现了，通过声明式定义的触发函数并不能访问vue实例。