Vue生命周期（初始阶段、挂载阶段、更新阶段、销毁阶段）
Vue生命周期（初始阶段、挂载阶段、更新阶段、销毁阶段）
1.钩子函数：
定义：钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行
作用：特定的时间，执行特定的操作
分类:四大阶段，八大方法
阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed
2.Vue生命周期之初始化阶段
new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
Init Events & Lifecycle：初始化事件和生命周期函数
beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
Init injections&reactivity：vue内部添加data和methods等
created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
接下来开始编译模板：开始分析
Has el option? ：是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项
【el选项挂载点图解】：
<!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}}</div>
<script>
// 整个页面只能有一个Vue实例对象
let vm = new Vue({
el: "#app",
data: {
msg: "hello",
},
methods: {},
});
</script>
</body>
</html>
Vue生命周期之挂载阶段
【图解挂载阶段】：
template选项检查:
有：编译template返回render渲染函数
无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
虚拟DOM挂载成真实DOM之前:
beforeMount ：生命周期钩子函数被执行
Create vm$el and replace "el" with it：把虚拟DOM和渲染的数据一并挂到真实DOM上
挂载完毕，mounted：生命周期钩子函数被执行
Vue生命周期之更新阶段
【更新图解】：
当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
Virtual DOM re-render and patch：虚拟DOM重新渲染, 打补丁到真实DOM
updated – 生命周期钩子函数被执行
当有data数据改变 – 重复这个循环
Vue生命周期之销毁阶段
【图解销毁】：
当$destroy()被调用：比如组件DOM被移除(例v-if)
beforeDestroy：生命周期钩子函数被执行
拆卸数据监视器、子组件和事件侦听器
实例销毁后, 最后触发一个钩子函数
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>
浙公网安备 33010602011771号