说明:Vue生命周期是学习Vue非常重要的知识点,其中生命周期钩子在程序开发中有着十分重要的地位。
目录
前言: 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。
一、生命周期图解
二、八个重要阶段
1.beforeCreate( 创建前 )
在组件实例初始化完成之后立即调用。
interface ComponentOptions {
beforeCreate?(this: ComponentPublicInstance): void
}
会在实例初始化完成、props 解析之后、data()
和 computed
等选项处理之前立即调用。
注意,组合式 API 中的 setup()
钩子会在所有选项式 API 钩子之前调用,beforeCreate()
也不例外。
2.created ( 创建后 )
在组件实例处理完所有与状态相关的选项后调用。
interface ComponentOptions {
created?(this: ComponentPublicInstance): void
}
当这个钩子被调用时,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el
属性仍不可用。
3.beforeMount(挂载前)
在组件被挂载之前调用。
interface ComponentOptions {
beforeMount?(this: ComponentPublicInstance): void
}
当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务端渲染时不会被调用。
4.mounted(挂载完成)
在组件被挂载之后调用。
interface ComponentOptions {
mounted?(this: ComponentPublicInstance): void
}
组件在以下情况下被视为已挂载:
-
所有同步子组件都已经被挂载。(不包含异步组件或
<Suspense>
树内的组件) -
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
5.beforeUpdate(修改前)
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
interface ComponentOptions {
beforeUpdate?(this: ComponentPublicInstance): void
}
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
6.updated(更新后)
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
interface ComponentOptions {
updated?(this: ComponentPublicInstance): void
}
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。
7.beforeDestroy(销毁前)
在实例销毁之前调用,实例仍然完全可用,
- 这一步还可以用this来获取实例,
- 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
8.destroyed(销毁后)
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
三、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue的数据模型</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<button @click="test">按钮</button>
<ul id="My">
<li>111</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "hello",
// time: new Date(),
msg: true,
},
methods: {
test() {
console.log("点击按钮-----");
},
},
//钩子函数,生命周期,在beforeCreate这个阶段,
//现在属性msg数据还没有绑定到实例对象vm上,所以数据不能输出来
//钩子函数在new Vue()之后执行 Vue内部给实例添加了一些属性(data)和方法(methods)
//钩子函数在data和methods之前执行
beforeCreate() {
//属性或方法声明了,但没有和实例绑定
console.log(
"beforeCreated函数执行了,---但此时获取不到实例内的属性和方法",
this.msg
); //输出:undefined
},
//生命周期,在created这个阶段属性msg数据绑定到vm实例对象上
//data和methods之后执行
created() {
//属性和方法绑定到实例上,可以通过实例进行调用
console.log(
"created执行了,---此时可以获取data和methods中的变量值",
this.msg
); //输出:'hello
},
/* 2.挂载 */
//虚拟dom挂载成真实dom之前,不可以操作dom
//使用场景,预处理data,不会触发update钩子函数
beforeMount() {
console.log(
"beforeMount执行了,---但此时获取不到真实的DOM节点",
"挂载之前"
);
console.log(document.getElementById("app"));
},
//虚拟dom挂载完毕变成真实dom,此处可以可以操作dom节点
mounted() {
console.log("mounted执行了,---此时可以获取到真实的DOM", "挂载后");
console.log(document.getElementById("app"));
},
/*2.更新*/
//更新前
beforeUpdate() {
console.log(document.querySelectorAll("#My>li"));
console.log(
"beforeUpdate函数执行了,---此时获取不到更新的真实DOM",
this.msg
);
},
//更新后
//场景:获取到更新的真实DOM节点
updated() {
console.log(document.querySelectorAll("#My>div"));
console.log(
"update函数执行了,---此时可以获取到更新的真实DOM",
this.msg
);
},
/*销毁*/
//销毁监听
beforeDestroy() {
console.log("beforeDestroy函数执行了", this.msg);
},
destroyed() {
console.log("destroy函数执行了", this.msg);
},
});
setInterval(() => {
vm.$destroy();
}, 5000);
</script>
</body>
</html>
本周出了点意外给忘掉了o(╥﹏╥)o。。。抱歉!抱歉!