Vue 的生命周期
生命周期执行的函数叫法有三种:
-
生命周期钩子
-
生命周期函数
-
钩子函数
生命周期钩子概念:
在vue实例的生命周期的各个过程中 提供函数写逻辑代码 vue实例内部会在各对应的过程调起该函数
生命周期钩子执行顺序：
创建到挂载的过程：
1. new Vue();
↓
2. 读取所有的生命周期钩子（没有调用）
↓
3. 执行beforeCreate生命周期钩子函数。（数据观测,事件,监听,都还不起作用）
↓
4. 读取所有的属性和方法，监听，计算属性 (此时Vue实例中的配置全部生效)
↓
5. 执行created 生命周期钩子函数
(请求后台数据,ajax请求之类的，在这个函数执行之后，就可以添加数据的监听)
↓
6. 判断是否有el配置项，如果没有，等待$mount()执行。如果不执行就终止生命周期(但之前的钩子还是有效的)
// 也可以 进行动态挂载
// vm.$mount('#app'); //等价于el配置项
↓
7. 渲染 template 模版
↓
8. 查找有没有对应的dom结构
↓
9. 有对应的dom结构，读取出来内部的dom，进行渲染 (意思就是说内部渲染出虚拟 dom结构)
↓
10. 执行beforeMount生命周期钩子函数 (挂载数据和渲染出真实 dom之前调用的函数)
↓
11. 内部渲染完成虚拟dom，并插入属性对应的数据 ,替换到el作用的真实dom中
↓
12.执行mounted生命周期钩子函数
(此时可以操作dom结构了，因为真实dom已经被渲染完成，不建议使用document操作。应该使用$refs操作dom)
更新的过程(由于数据已经发生了变化，需要重新渲染dom结构。更新是虚拟dom结构的更新):
12. 当数据（data）发生变化后
↓
13. 执行beforeUpdate生命周期钩子函数（数据已经变化了，虚拟dom没有更新）
↓
14. 将数据更新渲染到dom中去 (虚拟dom的重新渲染改变数据 , 然后转变为 真实dom )
↓
15. 执行updated生命周期钩子函数 (此时真实dom已经完全修改，之后可以调用$nextTick())
销毁的过程:
动态销毁 vm.$destroy() / 内部配置中调用this.$destroy()
↓
16. 执行beforeDestroy生命周期钩子函数 -- 将要移除事件监听(所有watch)
↓
17. 移除vue实例的事件监听，子组件的事件监听。
↓
18. 执行destroyed生命周期钩子函数
最后总结一下注意的点：
- 当全部数据变化时
事件执行的顺序：watch -> beforeUpdate -> updated -> $nextTick()
此时要进行 dom的操作时：
只能在 updated / $nextTick() 函数中进行操作
因为watch / beforeUpdate 时，真实的dom还未进行渲染出来
- 当某个数据变化时，执行dom操作
methods: {
changedata(){
this.data = 'xxxxx';
// 得到变化后的结果
/*
$nextTick()需要提供一个回调函数作为参数
当指定数据（data）发生变化后，dom结构执行更新后
回调函数再执行。
必须写在数据变化后的第一行代码。中间除注释外不能有任何的代码
*/
this.$nextTick(()=>{
console.log('nextTick调用了');
})
}
},
网友评论