12-vue2生命周期
大约 3 分钟
12-vue2 生命周期
8 个生命周期 created mounted updated destoryed
https://v2.cn.vuejs.org/v2/guide/instance.html
vue 生命周期分别有创建、初始化数据、编译模板、挂在 DOM、渲染-更新-渲染、卸载利用钩子函数完成对应的项目效果
beforeCreate( 创建前 )
在实例化之后，数据的观测和事件的配置之前的时候调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问 methods， data， computed 等上的方法和数据
created ( 创建后）
在创建之后使用，主要用于数据观测、属性和方法的运算，watch/event 事件回调，完成了 data 数据的初始化，el 没有。 然而，挂在阶段还没有开始.
beforeMount (挂载前)
用于在挂载之前使用,在这个阶段是获取不到 dom 操作的,把 data 里面的数据和模板生成 html，完成了 data 等初始化,注意此时还没有挂在 html 到页面上
mount (挂载后)
用于挂载之后使用，在这个时候可以获取到 dom 操作，比如可以获取到 ref 等，操作的 dom， 在这个时候只能调用一次 ajax，在这个时候 el 和 data 都可以获取的到
beforeUpdate (更新前)
在数据更新之前被调用，发生在虚拟 DOM 重新渲染，可以在该钩子中进一步地更改状态，不会触发重复渲染过程
updated (更新后)
在由于数据更改导致地虚拟 DOM 重新渲染会调用，调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，但是在服务器端渲染期间不被调用，可以用于监听某些数据的时候使用钩子
beforeDestroy（销毁前）
在这个时候还是可以用 this 来获取，可以用于销毁计时器时候使用，为了防止跳转到其它页面该事件还在执行，还可以清除 dom 事件等
destroy（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁.
<!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>Document</title>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<button id="btn">click me</button>
</body>
</html>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "Hello world",
msg2: "sss",
},
beforeCreate() {
console.log(
"beforeCreate: 挂载了vue实例的方法，但是data没有挂载",
this.msg
);
},
created() {
console.log("created: 挂载 了data", this.msg);
setTimeout(() => {
this.msg = "你好";
}, 1000);
},
beforeMount() {
console.log(
"beforeMount: data没有渲染到了页面",
document.getElementById("app").innerHTML
);
},
mounted() {
console.log(
"mounted: data渲染到了页面",
document.getElementById("app").innerHTML
);
},
beforeUpdate() {
console.log(
"beforeUpdate: 数据更改导致DOM更改之前",
document.getElementById("app").innerHTML
);
},
updated() {
console.log(
"updated: 数据更改导致DOM更改之后",
document.getElementById("app").innerHTML
);
},
beforeDestroy() {
console.log("beforeDestroy: ");
},
destroyed() {
console.log("destroyed: ");
},
});
document.getElementById("btn").onclick = () => {
app.$destroy();
};
</script>