<template>
<div>
<h1 class="h1">{{ msg }}</h1>
<button @click="changeMsg">更新</button>
<button @click="destroyedFn">销毁</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "例子",
};
},
}
初始化阶段
初始化 生命周期 事件对象
向vue注入了data和methods
data和methods初始化以后
场景: Ajax请求, 注册全局事件
beforeCreate() {
console.log("------beforeCreate初始化前------");
console.log(this.msg);
console.log(this.$el);
},
created() {
console.log("------created初始化完成------");
console.log(this.msg);
//获取不到DOM结构
console.log(document.querySelector(".h1")); //null
console.log(this.$el);
},
挂载阶段
场景:增删改查
beforeMount() {
console.log("------beforeMount挂载前触发------");
console.log(document.querySelector(".h1")); //null
console.log(this.$el);
},
mounted() {
console.log("------mounted挂载后成功触发------");
console.log(document.querySelector(".h1"));
console.log(this.$el);
//成功获取DOM 增删改查 Ajax请求
// this.time = setInterval(() => {
// console.log("延时器");
// }, 1000);
},
更新阶段
// 前提: data数据改变才执行
// 更新之前
beforeUpdate() {
console.log("------更新前---------");
console.log(document.querySelector(".h1").innerText);
console.log(this.$el);
},
// 更新之后
// 场景: 获取更新后的真实DOM
updated() {
console.log("------更新后---------");
console.log(document.querySelector(".h1").innerText);
console.log(this.$el);
},
销毁阶段
beforeDestroy() {
console.log("------销毁前------");
//使用场景:销毁全局的事件或定时器
clearInterval(this.time);
console.log(this.$el);
},
destroyed() {
console.log("------销毁后------");
console.log(this.$el);
},
运行结果