11、VUE生命周期函数
2022-04-01 12:35:00 0 举报AI智能生成
vue学习
作者其他创作
大纲/内容
定义
声明周期函数（俗称钩子函数），是根据Vue的整个渲染机制
在渲染的<b><font color="#c41230">每一个关键节点上</font></b>，提供<b><font color="#c41230">对应的函数</font></b>，让我们进行一些相关的操作的
创建实例阶段
1、从 new Vue() 开始
代表我们准备创建一个实例，让这个实例完成双向处理操作
2、初始化事件和生命周期管控
beforeCreate()<br>
作用时期
创建实例之前：<b><font color="#c41230">实例还没有创建出来呢</font></b>
此时实例都没有（或者数据都没有挂载呢），做啥事都没用
应用
根据一些信息的判断，<b><font color="#c41230">决定是否继续向下渲染，如果不需要向下，则跳转到其它的组件 </font></b>
可能会做一些组件是否渲染的权限校验
（路由中的导航守卫可能更适合干这个事情）
3、初始化 data/methods/filter......等数据的处理
此时我们的实例才算创建完成
complie 阶段
created()
作用时期
实例创建完成：<b><font color="#c41230">DATA/METHODS 等已经挂载到实例上了</font></b>
场景
页面中的<b><font color="#c41230">数据一般</font></b>需要从服务器获取，<b><font color="#c41230">动态绑定</font></b>
因为获取数据是异步的，在没有获取数据之前，我们就会向下渲染组件
这样<b><font color="#c41230">导致第一次渲染组件</font></b>其实是<b><font color="#c41230">没有拿到数据</font></b>的；
拿到数据后通过修改数据控制组件重新渲染；
应用
为了让页面展示数据的速度更快一些，我们尽可能把获取数据提前<b><font color="#c41230">（一般都是在created发送异步请求数据）</font></b>
4、实例创建好后，<br> 查找是否指定了 “el” <br>
否
继续查找是否执行 vm.$mount(el) 函数
是
相当于指定了 el
是
查找是否有 template <br>（因为组件用的是 template）<br>
是
将 template 编译到 render 函数中
否
将 el 外部的HTML，作为 template 编译
beforeMount()
作用时期
第一次渲染DOM之前：<b><font color="#c41230">此时页面中还没有DOM元素呢</font></b>
应用
基本不做什么事
=>有的人也会在这里发送异步数据
第一次渲染完成
5、把template语法编译<br>（生成一个虚拟DOM vm._vnode）<br>
原理
把template编译为虚拟的DOM对象，是基于一个插件（vue-template-loader）<br>
也是基于webpack处理的
6、vue底层开始把虚拟DOM变为真实的DOM（DOM对象）【dom diff】，最后把真实DOM渲染到页面中
mounted()
作用时期
第一次渲染DOM之后：<b><font color="#c41230">真实DOM渲染完了</font></b>
应用
=>第一次页面已经渲染完，页面中已经有我们想要的DOM信息
所以我们经常在这里<b><font color="#c41230">做一些DOM的处理或者监听</font></b>工作的
当 data 修改时
beforeUpdate()
作用时期
修改新的DOM之前，<b><font color="#c41230">新数据渲染之前</font></b>
应用
基本不做什么事
7、重新生成虚拟DOM
1. 拿本次生成的虚拟DOM 与 上一次（已经渲染完）的虚拟DOM 进行比较
找到两次的区别（深度优先原则）<br>
2. 将本次与上次不一样的地方，生成补丁包【dom diff】
3. 把这些补丁生成真实DOM，放在页面中进行重新渲染
updated()
作用时期
修改新的DOM之后，<b><font color="#c41230">新数据渲染之后</font></b>
应用
=>和mounted类似
注意
但是这里<b><font color="#16884a">不能</font></b>做一件事：<font color="#16884a"><b>修改响应数据</b></font>（<b><font color="#16884a">这样会导致修改操作的死循环</font></b>）
组件 (实例) 销毁
beforeDestroy()
作用时期
销毁之前
应用
=>该保存保存，该提示提示，一些事此时不处理以后就没机会了<br>
8、销毁的时候 页面已经渲染的真实DOM不动的 （路由跳转除外）
其它之前挂载的东西都消失了
destroyed()
销毁之后
应用
基本不做什么事
0 条评论
下一页
