vue 自省知识点——生命周期

生命周期

我们普遍了解的的有8个生命周期，beforeCreate，created ,beforeMount, mounted, beforeUpdate，updated, beforeDestroy，destroyed

下图阐述了一些相关知识点

当看完上面的内容，你可能就觉得自己明白了vue生命周期了，那么可以试着回答下面几个问题 ：

1. 你知道computed 事件发生在哪个生命周期吗？会对页面有什么影响？
2. 我们知道watch 对象键值中，immediate如果为true 代表在 wacth 里声明了之后，就会立即先去执行里面的handler方法，那么此时是发生在哪个生命周期?
3. 知道父子组件的生命周期顺序吗？

答案：

• 你知道computed 事件发生在哪个生命周期吗？会对页面有什么影响？

1. Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的
2. 参考地址 : https://segmentfault.com/q/1010000010364198
3. 这里如果在mounted中对computed 监听的变量发生更改，computed 也会发生更新，但是如果涉及到dom，例如computed 计算dom 高度，此时mounted 更改，computed 值会发生更新，但是dom 高度并不会变化 

     computed: {
	    test() {
	      console.log('a')
	      return this.searchInput
	    }
	  },
	  mounted() {
	    console.log('b')
	    this.searchInput = 7
	  },
	  // 输出结果为 a , b , a

•  我们知道watch 对象键值中，immediate如果为true 代表在 wacth 里声明了之后，就会立即先去执行里面的handler方法，那么此时是发生在哪个生命周期?
  • immediate如果为true, 也是发生在beforeCreate 之后，created之前
• 知道父子组件的生命周期顺序吗？
  •  加载渲染过程 ： 
    • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件更新过程
    • 父beforeUpdate->子beforeUpdate->子updated->父updated 
  • 父组件更新过程
    • 父beforeUpdate->父updated
  • 销毁过程
    •  父beforeDestroy->子beforeDestroy->子destroyed->父destroyed