computed是计算属性,依赖其他属性计算,并且computed的值有缓存,只有当计算值发生变化才会返回内容。
比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。
watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。
watch:{ goodsList.price(newVal,oldVal){ //监控商品列表中是商品价格 } }
这样会报错,只能监控整个对象或单个变量。如:
data(){ return { example0:"", example1:"", example2:{ inner0:1, innner1:2 } } }, watch:{ example0(newVal,oldVal){//监控单个变量 …… }, example2(newVal,oldVal){//监控对象 …… }, }
一般来说:
需要依赖别的属性来动态获得值的时候使用computed;
监听到值的变化需要进行一些业务逻辑的时候使用wtch;
另外 computed
和 watch
还都支持对象的写法
vm.$watch(‘obj‘, { // 深度遍历 deep: true, // 立即触发 immediate: true, // 执行的函数 handler: function(val, oldVal) {} }) var vm = new Vue({ data: { a: 1 }, computed: { aPlus: { // this.aPlus 时触发 get: function () { return this.a + 1 }, // this.aPlus = 1 时触发 set: function (v) { this.a = v - 1 } } } })
原文:https://www.cnblogs.com/linjiangjin/p/10414533.html