关于javascript:Vue-中computed-和-watch-的区别

前言

在 vue 的我的项目中，咱们时常会须要对 data 的扭转做出解决，这时候就须要用到 watch 和 computed 这两个属性，既然都是数值扭转触发扭转的属性，他们之间又有什么异同呢？

computed

• computed 是计算属性，它会依据你所依赖的数据动态显示新的计算结果。
• 计算属性将被退出到 Vue 实例中。所有 getter 和 setter 的 this 上下文主动地绑定为 Vue 实例
• 通过计算出来的属性不须要调用间接能够在 DOM 里应用

例子

var vm = new Vue({
  el: '#app',
  data: {message: 'red'},
  template: `
 <div> <p> 我是原始值: "{{message}}"</p> <p> 我是计算属性的值: "{{computedMessage}}"</p> // computed 在 DOM 里间接应用不须要调用 </div> `,
  computed: {// 计算属性的 getter     computedMessage: function () {// `this` 指向 vm 实例       return this.message.split('').reverse().join('')
    }
  }
})

后果：
我是原始值: “red”
我是计算属性的值: “der”

如果不应用计算属性，那么 message.split(”).reverse().join(”) 就会间接写到 template 里，那么在模版中放入太多申明式的逻辑会让模板自身过重，尤其当在页面中应用大量简单的逻辑表达式解决数据时，会对页面的可维护性造成很大的影响

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

所以，如果数据要通过简单逻辑来得出后果，那么就举荐应用计算属性

watch

• 一个对象，键是 data 对应的数据，值是对应的回调函数。值也能够是办法名，或者蕴含选项的对象，当 data 的数据发生变化时，就会产生一个回调，他有两个参数，一个 val（批改后的 data 数据），一个 oldVal（原来的 data 数据）

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性

new Vue({
  data: {
    n: 0,
    obj: {a: "a"}
  },
  template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a +='hi'">obj.a +'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象 </button> </div> `,
  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(‘data 属性名 ’, fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){console.log("n 变了");
},{deep: true, immediate: true})

两者区别

相同点：

两者都是察看页面数据变动的。

不同点：

• computed 只有当依赖的数据变动时才会计算, 会缓存数据。
• watch 每次都须要执行函数。watch 更实用于数据变动时的异步操作

总结

• 如果一个数据须要通过简单计算就用 computed
• 如果一个数据须要被监听并且对数据做一些操作就用 watch