Vue核心知识：computed、methods和watch的区别

Vue核心知识：computed、methods和watch的区别

作用机制上

1. methods，watch 和 computed 都是以函数为基础的，但各自却都不同
2. watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动
3. methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / compute；methods 不处理数据逻辑关系，只提供可调用的函数，类似储存函数的一个库

性质上

1. methods 里面定义的是函数，仍然需要去调用它。
2. computed 是计算属性，在使用上和 data 对象里的数据属性是同一类的，底层借助了Objcet.defineproperty方法提供的getter和Isetter.
3. watch：类似于监听机制+事件机制，当被监视的属性变化时，回调函数自动调用，进行相关操作

加载顺序

1. computed

是在 HTML DOM 加载后马上执行的，如赋值； 计算后的属性将直接赋值到vue实例中

2. methods

页面渲染完成后，必须要有一定的触发条件才能执行，如点击事件，

3. watch

它用于观察 Vue 实例上的数据变动。

4. 默认加载的时候

先 computed 再 watch，不执行 methods；

5. 触发某一事件后

先 computed 再 methods 再到 watch，computed 计算属性是基于它们的依赖进行缓存的

区别

计算属性computed

• 定义：要用的属性不存在，要通过已有属性计算得来。

• 原理：底层借助了Objcet.defineproperty方法提供的getter和Isetter.

• get函数什么时候执行?

  • 初次读取时会执行一次。
  • 当依赖的数据发生改变时会被再次调用。

• 优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。

• 备注：

  • 计算属性最终会出现在vm上，直接读取使用即可。
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

• 一个计算属性里面可以完成各种复杂的逻辑，最终返回一个结果；计算属性可以依赖多个vue实例的数据，只要其中一个任何一个数据发生变化，计算属性就会重新执行，视图也会更新。除此之外，计算属性还可以依赖其他计算属性和其他实例的数据

应用场景：（一个数据受多个数据影响）字符串拼接，购物车商品结算

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
    </div>
  `,
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

监听属性watch

监视属性watch:

• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视!
• watch中的函数有两个参数，前者是newVal，后者是oldVal。
• watch中的函数是不需要调用的。
• 特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改arr第0项值为100。
• watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。"obj.name"(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

应用场景：（一个数据影响多个数据）搜索框、表单输入、异步更新、动画

new Vue({
  template: `
    <div>
      <p>FullName: {{fullName}}</p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
    </div>
  `,
  data: {
    firstName: '张',
    lastName: '三',
    fullName: ' '
  },
  watch: {
    firstName (newName, oldName) {
      this.fullName = newName + ' ' + this.lastName
    }
  }
})