Vue生命周期过程中,会自动运行一些函数,被称为[生命周期钩子]让开发者可以在特定阶段 运行自己的代码。
借用一下黑马的图片
上代码为大家演示一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<span>{{num}}</span>
</div>
</body>
<script src="../JS/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#app",
data:{
num:100
},
// 1.创建阶段(准备阶段)
beforeCreate() {
console.log("响应式数据准备好之前",this.num);
},
created() {
console.log("响应式数据准备好之后",this.num);
},
// 2.挂载阶段(渲染模版)
beforeMount() {
console.log("渲染模版之前",document.querySelector("span").innerHTML);
},
mounted() {
console.log("渲染模版之后",document.querySelector("span").innerHTML);
},
// 更新阶段(修改数据 => 更新视图)
beforeUpdate() {
console.log("数据修改了 视图没更新",document.querySelector("span").innerHTML);
},
updated() {
console.log("数据修改了 视图已经更新",document.querySelector("span").innerHTML);
},
// 卸载阶段
beforeDestroy() {
console.log("销毁前");
},
destroyed() {
console.log("销毁后");
}
})
</script>
</html>
我们更新数据看看
那我们销毁怎么做呢,我就是想看看打印结果
好,我们可以使用 vm.$destroy()
当我们销毁之后,页面照常渲染,不过已经不能做其它的操作了!
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!