Vue生命周期

Vue文件:Vue实例的模板

Vue实例:Vue组件

Vue生命周期:指一个Vue组件 创建 - 挂载 - 更新 - 销毁 的过程

Vue生命周期提供了8个回调函数,在相应的阶段自动执行

生命周期具体过程
1.创建Vue的实例.

2.初始化组件事件和生命周期函数

3.调用beforeCreate函数,这个阶段组件没有任何数据,所以这个函数没什么用.

4.初始化props/data/methods.

5.调用created函数,这个阶段props/data/methods都有了,一般在这里发送网络请求,但组件的模板结构还没有生成,这个函数不能操作Dom

6.判断是否有el选项,如果有el,判断是否有template选项.如果没有el,当有vm.$mount(el)时判断是否有template选项.

7.判断是否有template选项,如果有,编译template作为模板.如果没有,把el当做模板编译.

8.基于模板和数据生成Html结构.

9.调用beforeMount函数,此时在内存中已经编译好html结构,但没挂载上浏览器.也不能操作Dom.这个函数也没什么用.

10.用内存中编译好的Html替换掉el属性指定的Dom元素.

11.调用mounted函数,此时浏览器已经挂载了组件Dom,一般在这个函数里面操作Dom元素.

12.当数据发生改变的时候触发beforeUpdate,但此时数据还没有挂载进Dom.所以数据是新的,但是Dom元素的数据是旧的.

13.将最新数据挂载进Dom元素

14.调用updated,此时Dom元素里的数据已经是最新的了.如果要操作最新的Dom数据,就要卸载updated函数里面.

15.当数据再次发生改变,再次执行12.13.14步.

16.当组件将要销毁时,调用beforeDestroy函数,此时组件还未销毁.

17.销毁监听事件，子组件，数据侦听器.

18.调用destroyed函数

19.销毁组件，完全将组件从Dom中移除.

生命周期面试题

1.什么是vue生命周期？
就是指Vue实例从创建到初始化数据,到编译模板，到挂载Dom,到更新数据渲染数据，最后销毁的过程.
2. vue生命周期的作用是什么
Vue 所有的功能都是围绕生命周期实现的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
3. 第一次页面加载会触发哪几个钩子？
beforeCreate / created / beforeMount / mounted 四个钩子函数.
4. 简述每个周期具体适合哪些场景？