生命周期(指虚拟dom的整个生命周期)
1.创建前的生命周期--beforeCreate()
2.创建后的生命周期--created()
完成页面的初始赋值
created中赋值不会触发更新生命周期
3.挂载前的生命周期--beforeMount()
4.挂载后的生命周期--mounted()
可以获取到页面的节点(对节点进行处理)发送ajax请求、启动定时器、绑定自定义事件、订阅消息等
只有数据被虚拟dom进行绑定以后的触发才会执行更新生命周期
多次对虚拟dom绑定的数据进行修改,只会更新一次
5.更新前的生命周期--beforeUpdata()
6.更新后的生命周期--updated()
7.销毁前的生命周期--beforeDestroy()
用于清除定时器,时间解绑等
8. 销毁后的生命周期--destroyed()
// 创建前的生命周期 -- 了解即可
beforeCreate() {
console.log('--------------------------- beforeCreate start')
console.log('--------------------------- beforeCreate end')
},
// 创建后生命周期 -- 非常重要,以后页面的初始赋值都应该在这个生命周期完成
// created中赋值不会触发更新生命周期
created() {
console.log('--------------------------- created start')
console.log('--------------------------- created end')
},
// 挂载前生命周期
beforeMount() {
console.log('--------------------------- beforeMount start')
console.log('--------------------------- beforeMount end')
},
// 挂载后生命周期 -- 非常重要,可以获取到页面的节点,如果需要对节点进行处理
// 生命周期实际上是指虚拟dom的整个生命周期
mounted() {
console.log('--------------------------- mounted start')
// 只有数据被虚拟dom进行绑定以后的触发才会执行更新生命周期
// 多次对虚拟dom绑定的数据进行修改,只会更新一次
console.log('--------------------------- mounted end')
},
// 更新前生命周期
beforeUpdate() {
console.log('--------------------------- beforeUpdate start')
}
updated() {
console.log('--------------------------- updated start')
}
//销毁前的生命周期
beforeDestroy() {
console.log('--------------------------- beforeDestroy start')
}
//销毁后的生命周期
destroyed() {
console.log('--------------------------- destroyed start')
}
}
常用的生命周期钩子:
1.created:完成页面的初始赋值,created中赋值不会触发更新生命周期
2.mounted:发送ajax请求、启动定时器、绑定自定义事件等。
3.beforeDestroy:清除定时器、解绑自定义事件等。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会再beforeDestroy操作数据。因为即便操作数据。也不会再触发更新流程了-
created和mounted有什么区别?
created不能获取dom节点,mounted能获取到dom节点
什么时候用created、mounted?
如果不需要对dom进行操作用created,反之用mounted;并且mounted中的数据更新会引起更新生命周期,created不会引起更新生命周期