【Vue】生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。...
·
一、生命周期图解
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
| 钩子函数 | 简解 |
|---|---|
| beforeCreate | 创建前调用 ：el 没有绑定 data数据不存在 |
| created | 创建后调用：data 数据已经绑定，el 还没有绑定 |
| beforeMount | 挂载前调用：el 绑定，dom节点的数据渲染未解析 |
| mounted | 挂载后调用：el绑定，dom节点的数据渲染已经解析 |
| beforeUpdate | 组件更新之前调用 |
| update | 组件更新之后调用 |
| beforeDestroy | 组件销毁之前调用 |
| destroy | 组件销毁之后调用 |
| 补充： | |
| activated | 被 keep-alive 缓存的组件激活时调用。 |
| deactivated | 被 keep-alive 缓存的组件停用时调用。 |
二、钩子函数详解
beforeCreate：- 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：- data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：- 执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：- 执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate：- 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：- 页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：- Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed：- 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了
- 示例：
<body>
<div id="app">{{msg}}</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello"
},
//创建前 el 没有挂载 data数据不存在
beforeCreate() {
console.log('创建前的钩子函数执行了');
console.log({ "el": this.$el, "data": this.$data, "message": this.msg });
},
//创建后 data 数据已经绑定了，el还没有绑定
created() {
console.log('创建后的钩子函数执行了');
console.log({ "el": this.$el, "data": this.$data, "message": this.msg });
},
//挂载前 el绑定，dom节点的数据渲染未解析
beforeMount() {
console.log('挂载前的钩子函数执行了');
console.log({ "el": this.$el, "data": this.$data, "message": this.msg });
},
//挂载后 el绑定，dom节点的数据渲染已经解析
mounted() {
console.log('挂载后的钩子函数执行了');
console.log({ "el": this.$el, "data": this.$data, "message": this.msg });
},
//注意：组件第一次加载执行 beforeCreate created beforeMount mounted ,只执行一次
//获取数据(异步操作)在哪个钩子中 created beforeMount mounted
//操作dom节点 mounted
//更新前的钩子
//更新前和更新后的钩子函数可以执行多次
beforeUpdate() {
console.log("更新前的钩子运行了");
},
updated() {
console.log("更新后的钩子运行了");
},
//卸载前和卸载后的钩子函数 ，app.$destroy(),可以看到效果
//可以做垃圾回收
// 定时器、绑定的事件进行解除绑定
beforeDestroy() {
console.log("卸载前的钩子运行了");
},
destroyed() {
console.log("卸载后的钩子运行了");
}
})
</script>
</body>
- 控制台打印结果：
三、常见的面试题
1. vue生命周期总共有几个阶段？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
2.第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted
3. vue获取数据在哪个周期函数
答：一般 created/beforeMount/mounted 皆可.
比如：如果你要操作 DOM , 那肯定 mounted 时候才能操作
4. created和mounted的区别
答：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
5. DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献8条内容
所有评论(0)