2021-08-20

1、watch和beforeUpdate,updated有什么不同？

beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生变化，会触发对对应组件的重新渲染，当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。

注：通过试验证明，在mounted钩子函数中执行修改data的操作会触发beforeUpdate，而它之前的函数中只要不是可以跳出主线程的数据操作，都不会触发beforeUpdate。例如使用setTimeout会使其中代码跳出主线程到异步线程中，所以它的执行会在mounted之后，所以会触发beforeUpdate。

2、vue 生命周期+watch、computed、methods执行顺序

推荐文章

1. 详解vue生命周期--https://segmentfault.com/a/1190000011381906
2. watch、computed、methods三者区别--https://blog.csdn.net/qq_45846359/article/details/108671907

watch、computed、methods执行顺序

• 页面初始化时： 会执行一次computed，watch初始化时不会执行，methods只有调用的时候才会执行。

• 渲染完成后，触发methods： methods -> watch -> computed

watch、computed、methods三者区别

https://blog.csdn.net/qq_45846359/article/details/108671907

• watch：是监听某一个值的变化，初始化时不会监听；如果要在数据变化的同时进行异步操作或者是比较大的开销时，推荐watch

• computed：是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。有缓存，如果计算的值没有发生改变，是会走缓存的；而且一定要return。（只是需要动态值用computed）

• methods：每调用一次，就会执行一次。在重新渲染的时候每次都会被重新的调用；

Computed 与 methods 对比

1、computed是属性调用，而methods是函数调用
2、computed带有缓存功能，而methods不会被缓存

属性调用：

• computed定义的方法我们是以属性访问的形式调用，{{computedTest}}
• methods定义的方法，我们必须要加上()来调用，{{methodTest()}}

缓存功能：

• computed计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
• methods不会被缓存：方法每次都会去重新计算结果。

3、vue中watch的三个属性

watch详解

基本用法：

当firstName值变化时，watch监听到并且执行

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

handler方法和immediate属性：

上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

deep属性（深度监听，常用于对象下面属性的改变）：

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
 watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
})