Skip to main content

Vue 2

lifecycle$refsnotes
beforeCreate组件实例尚未完全初始化。
createdDOM 尚未渲染,模板中的引用未挂载到实例。
beforeMount组件即将挂载,但 DOM 结构尚未生成。
mountedDOM 已生成并挂载,$refs 已初始化完成。
beforeUpdate数据更新前调用,适合在更新前访问现有 DOM。
updated数据更新后调用,适合在更新后操作 DOM。
beforeDestroy组件销毁前调用,适合在销毁前清理资源。
destroyed组件销毁后调用,所有绑定和事件监听器已移除。
this.$nextTick(() => {
// DOM 更新完成后执行的代码
});
this.$watch('someData', (newVal, oldVal) => {
// 数据变化时执行的代码
});

// 子组件中触发事件
this.$emit('customEvent', data);
// 父组件中监听事件
this.$on('customEvent', (data) => {
// 处理事件
});

// 访问父组件实例
this.$parent.someMethod();

// 访问子组件实例
this.$children[0].someMethod();

/ 添加属性
this.$set(this.someObject, 'newProp', value);

// 删除属性
this.$delete(this.someObject, 'propToDelete');

// 强制更新
this.$forceUpdate();

// 销毁组件
this.$destroy();