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