最主要
export default {
// ...
beforeDestroy() {
// 在实例销毁前执行一些操作
},
destroyed() {
// 在实例销毁后执行一些操作
},
// ...
}
beforeCreate: {
// Vue 实例创建之前执行的代码
// 在此阶段,Vue 实例的选项和数据尚未初始化,无法访问到 data、computed、methods 等属性
// 示例代码:
console.log("beforeCreate 阶段:Vue 实例被创建之前");
},
created: {
// Vue 实例创建完成后执行的代码
// 在此阶段,Vue 实例已经创建,可以访问到 data、computed、methods 等属性,但尚未挂载到 DOM 上
// 示例代码:
console.log("created 阶段:Vue 实例已经创建,但尚未挂载到 DOM 上");
},
beforeMount: {
// Vue 实例挂载之前执行的代码
// 在此阶段,Vue 实例已经编译模板,但尚未挂载到 DOM 上
// 示例代码:
console.log("beforeMount 阶段:Vue 实例即将挂载到 DOM 上");
},
mounted: {
// Vue 实例挂载完成后执行的代码
// 在此阶段,Vue 实例已经挂载到 DOM 上,可以进行 DOM 操作
// 示例代码:
console.log("mounted 阶段:Vue 实例已经挂载到 DOM 上");
},
beforeUpdate: {
// Vue 实例更新之前执行的代码
// 在此阶段,数据即将更新,可以进行状态更新操作,但尽量避免直接修改数据
// 示例代码:
console.log("beforeUpdate 阶段:Vue 实例即将更新数据");
},
updated: {
// Vue 实例更新完成后执行的代码
// 在此阶段,数据已经更新完成,DOM 也已重新渲染
// 示例代码:
console.log("updated 阶段:Vue 实例已经更新数据");
},
beforeDestroy: {
// Vue 实例销毁之前执行的代码
// 在此阶段,实例仍然完全可用
// 示例代码:
console.log("beforeDestroy 阶段:Vue 实例即将销毁");
},
destroyed: {
// Vue 实例销毁后执行的代码
// 在此阶段,实例已经销毁,所有的事件监听和子实例都被移除
// 示例代码:
console.log("destroyed 阶段:Vue 实例已经销毁");
}