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

本文主要介绍vue 生命周期（beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed）和监听(watch)、计算属性(computed)、方法(methods)的执行顺序

1、生命周期执行顺序

• 页面初始化时：beforeCreate -> created -> beforeMount -> mounted
• 页面发生修改时：beforeUpdate -> updated
• 页面销毁时：beforeDestroy -> destroyed

---

2、父子组件生命周期执行顺序

• 页面初始化时：父beforeCreate -> 父created -> 父beforeMount ->子beforeCreate -> 子created -> 子
  beforeMount -> 子mounted-> 父mounted
  从图中可以看到，子组件要先于父组件挂载完成。
  

  image.png

• 页面发生修改时：beforeUpdate -> updated
  父、子组件间的更新互不影响，只更新自己。

• 页面销毁时：父beforeDestroy -> 子beforeDestroy ->子destroyed->父 destroyed
  销毁时也是子组件要先于父组件销毁
  

  image.png

---

3、this.$nextTick在各生命周期的执行顺序

记得有一次面试，有位面试官问我nextTick是指在dom渲染完成后执行，结果如图。

image.png

虽然每个周期使用$nextTick都可以获取到dom，但是还是建议在mounted中使用哈，因为beforeMount/mounted本来就是挂载dom滴~

4、watch、computed、methods执行顺序

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

image.png

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

image.png

---

5、watch、computed、methods三者区别

• watch：是监听某一个值的变化，初始化时不会监听；如果要在数据变化的同时进行异步操作或者是比较大的开销时，推荐watch
• computed：有缓存，如果计算的值没有发生改变，是会走缓存的；而且一定要return。
• methods：每调用一次，就会执行一次。
  watch、computed、methods三者的详细区别，看这里~--https://blog.csdn.net/qq_45846359/article/details/108671907

---

推荐文章

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