面试题系列--vue的生命周期

Posted 2021-06-14 程序媛...

vue的生命周期

vue实例从创建到销毁的过程就是vue的生命周期

一共有八个生命周期

1.beforeCreate

1.创建之前:什么都是undefined

2.实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据

2.created

1.创建完成：vue对象创建完成，但是挂载点还没找

2.实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组

3.常用于简单的ajax请求，页面的初始化

3.beforeMount

1.如果有el，就会触发挂载期；如果没有，挂载期就不执行
挂载之前：找到了要挂载的标签（el）,但是指令、{{}}还没有解析

2.在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数

3.如果Vue没有template选项，那么就解析的是el对应的节点
如果Vue有tempalte选项，那么解析的就是template，把template替换el

4.mounted

1.挂载完成：指令、{{}}解析完成,DOM节点加载完成
2.操作DOM、打开计时器、一进到页面做数据交互、给document、window加事件

3.实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问

5.brforeUpdate

数据变了，页面重新更新之前和更新之后取到的都是新值
页面重新更新之前

6.updated

页面重新更新完成

7.beforeDestory

vm.$destroy() 触发，会引起销毁--
销毁之前-善后工作 ：清除计时器、清除document、window上的事件。

8.destoryed

销毁完成

vue第一次页面加载会触发哪几个钩子函数？

beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成？

mounted