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