watch监听对象里面值的变化_计算属性computed和watch的区别

computed: 当一个属性受多个属性影响的时候就需要用computed computed可以监听data中的值，只要值发生变化 他就会重新去计算 computed必须是要有一个返回值的哦 eg1：购物车商品结算时候。当你在模板内使用了复杂逻辑的表达式时，你应当使用计算属性。

            data: {
return{
                    firstname: "",
                    lasttname: "",
                }
            },
            computed: {
                fullname: function () {
return this.firstname + "-" + this.lasttname
                }
            },

eg2：

  data: {
    message: 'hello'
  },
  template: `

我是原始值: "{{ message }}"

我是计算属性的值: "{{ computedMessage}}"

// computed 在 DOM 里直接使用不需要调用


`,
computed: {
// 计算属性的 getter
computedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
如果不使用计算属性，那么 message.split('').reverse().join('') 就会直接写到 template 里，那么在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响

而且计算属性如果依赖不变的话，它就会变成缓存，computed 的值就不会重新计算

所以，如果数据要通过复杂逻辑来得出结果，那么就推荐使用计算属性


watch：

    当一条数据影响多条数据的时候就要用watch
    eg：搜索数据
    当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。
    一个对象，键是 data 对应的数据，值是对应的回调函数。值也可以是方法名，或者包含选项的对象，当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个 val (修改后的 data 数据)，一个 oldVal(原来的 data 数据)Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性

eg1：
new Vue({

  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `

"n += 1">n+1"obj.a += 'hi'">obj.a + 'hi'"obj = {a:'a'}">obj = 新对象


`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
},
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
}
}
}).$mount("#app");

注意：不应该使用箭头函数来定义 watcher 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例

deep 控制是否要看这个对象里面的属性变化
immediate 控制是否在第一次渲染是执行这个函数






vm.$watch() 的用法和 watch 回调类似

vm.$watch('data属性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 变了");
},{deep: true, immediate: true})


使用场景

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

总结

如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch

扫码加群