Vue的生命周期
在Vue中,Vue的生命周期是指,Vue实例从开始创建,初始化数据,编译模板,挂在dom->渲染,更新->渲染,卸载等一系列过程.
钩子函数
1, beforeCreate钩子函数
# 在实例初始化之后,this指向创建的实例,不能访问到data,computed,watch,methods上的方法和数据
beforeCreate() {
console.log('创建前-el', this.$el)
console.log('创建前-data', this.$data)
},
# 打印结果:
创建前-el undefined
创建前-data undefined
# 挂在数据(属性赋值),包括属性和computed的运算.在beforeCreated和created两个钩子函数之间发生
beforeCreated: {},
computed: {},
created: {},
2, created函数
# 实例创建完成,在created钩子函数这个时期,我们能够访问到data,computed,methods上的方法和数据,但是,这会还没有挂在dom。不能访问到$el,$ref属性内容未空数组
created() {
console.log('创建时--el', this.$el) # undefined
console.log('创建时--data', this.message) # 123
console.log('创建时-computed', this.a)
console.log('创建时--methods', this.onClick())
}
# 返回结果
创建时--el undefined
创建时--data 123
创建时-computed 计算属性
创建时--methods 点击事件
3, beforeMount钩子函数
# 在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数。
此时,this.$el上有值,但是数据还没挂载到页面上,即此时页面中的{{}}还没有被替换掉。
beforeMount() {
console.log('挂在之前调用', this.$el) # undefined
},
4, mounted钩子函数
# 实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问。
mounted () {
console.log('挂在dom节点', this.$el)
},
# 返回结果
<div>...</div>
5, beforeupdate钩子函数
# 组件更新之前执行,数据更新了,但是,vue(组件)对象内部(innerHTML)没有变
beforeUpdate() {
console.log('组件更新前--数据', this.message)
console.log('组件更新前--dom', this.$el.innerHTML)
},
# 实战场景:适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器
6, updated钩子函数
# 虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作
updated() {
console.log('组件更新时--数据', this.message)
console.log('组件更新时--dom', this.$el.innerHTML)
}
7, beforeDestroy钩子函数
# 实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例
beforeDestroy() {
console.log('实例销毁前', this.$el)
},
8, destory钩子函数
# 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
9, 总括介绍
<script>
export default {
// 数据对象
data() {
return {
msg: "你好世界!!",
arr: [1, 2, 3],
timer: "",
};
},
// new Vue()之后执行 vue内部给实例添加了一些属性和方法
// data和methods之前执行
beforeCreate() {
console.log("beforeCreate函数执行了");
// 此时获取不到data中的变量值
console.log(this.msg);
},
methods: {
add() {
this.arr.push(Math.floor(Math.random() * 10));
},
},
// data和methods之后执行
created() {
console.log("create函数执行了");
// 此时可以获取到data中的变量值
console.log(this.msg);
this.timer = setInterval(() => {
console.log("哈哈哈哈!");
}, 1000);
},
/**
* 2、挂载
*/
//真实DOM挂载之前
// 使用场景:预处理data,不会触发update钩子函数
beforeMount() {
console.log("beforeMount函数执行了----此时获取不到真实DOM");
console.log(document.getElementById("myMsg"));
// 重新改变data中的值
this.msg = "hello,world";
},
//真实DOM挂载之后
// 此处可以获取到真实的DOM
mounted() {
console.log("beforeMount函数执行了----此时可以获取到真实DOM");
console.log(document.getElementById("myMsg"));
},
/**
* 3、更新
*/
//更新之前
beforeUpdate() {
console.log("beforeUpdate函数执行了-----此时获取不到更新的真实DOM");
console.log(document.querySelectorAll("#myArr>li"));
},
// 更新之后
// 场景:获取更新真实DOM之后
updated() {
console.log("update函数执行了-----此时可以获取到更新的真实DOM");
console.log(document.querySelectorAll("#myArr>li"));
},
/**
* 4、销毁
*/
beforeDestroy() {
console.log("beforeDestroy函数执行了");
clearInterval(this.timer)
},
destroyed() {
console.log("destroyed函数执行了");
},
};
</script>
凡所有相,皆是虚妄。