vue生命周期
原创
Vue.js 的生命周期指的是 Vue 实例从创建到销毁的整个过程，它包括了一系列的阶段和钩子函数，允许开发者在不同的阶段执行自定义逻辑。以下是 Vue.js 生命周期的概述：
生命周期阶段
- 创建前(beforeCreate)
- 组件实例被创建，但属性和方法尚未初始化。
- 此时
this指向新创建的 Vue 实例。
- 创建后(created)
- 组件实例创建完成，属性和方法已经初始化。
- 可以访问和操作组件的数据。
- 载入前(beforeMount)
- 组件模板编译完成，准备挂载到 DOM 上。
- 载入后(mounted)
- 组件已经挂载到 DOM 上，可以操作 DOM 元素。
- 更新前(beforeUpdate)
- 组件的数据更新前，可以获取当前 DOM 元素。
- 更新后(updated)
- 组件数据更新后，可以获取更新后的 DOM 元素。
- 销毁前(beforeDestroy)
- 组件实例即将被销毁，可以执行清理工作。
- 销毁后(destroyed)
- 组件实例已经被销毁，所有的数据和事件监听器被移除。
示例代码
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function () {
console.log('beforeCreate')；
console.log(this)； // 此时 this 指向 Vue 实例
},
created: function () {
console.log('created')；
console.log(this.message)； // 此时可以访问 data 中的值
},
beforeMount: function () {
console.log('beforeMount')；
},
mounted: function () {
console.log('mounted')；
},
beforeUpdate: function () {
console.log('beforeUpdate')；
},
updated: function () {
console.log('updated')；
},
beforeDestroy: function () {
console.log('beforeDestroy')；
},
destroyed: function () {
console.log('destroyed')；
}
})；原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
