西安网站seo推广厂家,个人免费自助建站,wordpress精简版,龙岗公司做网站以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明
详细说明 beforeCreate#xff08;创建前#xff09;#xff1a;在实例初始化之前调用。此时#xff0c;实例的数据观测 (data observer)、属性和方法的运算#xff0c;以及事件配置等内部设置都已完成#xff0…以下是 Vue 生命周期钩子函数分别做了什么事情的详细说明
详细说明 beforeCreate创建前在实例初始化之前调用。此时实例的数据观测 (data observer)、属性和方法的运算以及事件配置等内部设置都已完成但是尚未挂载到 DOM 上。在这个钩子中我们可以进行一些数据获取或者变量声明等准备工作。 created创建后在实例创建完成后立即被调用。在这一步实例已经完成了以下的配置数据观测 (data observer)属性和方法的运算watch/event listener 都已经初始化但还没有挂载到 DOM 上。在这个钩子中我们可以进行一些组件内数据的初始化操作。 beforeMount载入前在组件挂载之前调用。在这一步Vue 实例已经编译模板但是还没有挂载到 DOM 上。在这个钩子中我们可以进行一些组件内数据的计算或者处理等准备工作。 mounted载入后在组件挂载之后调用。在这一步Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。在这个钩子中我们可以进行一些页面元素的初始化或者绑定等操作。 beforeUpdate更新前在数据更新之前调用。在这一步Vue 实例的数据已经更新但是虚拟 DOM 还没有重新渲染。在这个钩子中我们可以进行一些数据校验或者条件判断等操作。 updated更新后在数据更新之后调用。在这一步Vue 实例的数据已经更新虚拟 DOM 也已经重新渲染。在这个钩子中我们可以进行一些页面元素的更新或者刷新等操作。 activated激活在组件被激活时调用。当一个组件被复用时例如在一个 keep-alive 标签中这个钩子会被调用。在这个钩子中我们可以进行一些组件的激活状态设置或者数据恢复等操作。 deactivated停用在组件被停用时调用。当一个组件离开 keep-alive 标签时这个钩子会被调用。在这个钩子中我们可以进行一些组件的停用状态设置或者数据保存等操作。 beforeDestroy销毁前在实例销毁之前调用。此时实例仍然完全可用。在这个钩子中我们可以进行一些资源释放或者清理工作等操作。 destroyed销毁后在实例销毁之后调用。此时所有的子实例、事件监听器和事件发射器都会被清理掉。在这个钩子中我们不需要再进行任何操作。 errorCaptured错误捕获当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数错误对象、发生错误的组件实例以及完整的错误堆栈信息。在这个钩子中我们可以进行一些错误处理或者日志记录等操作。
Vue 生命周期钩子函数示例
beforeCreate创建前在实例初始化之前调用。此时实例的数据观测 (data observer)、属性和方法的运算以及事件配置等内部设置都已完成但是尚未挂载到 DOM 上。
beforeCreate() {console.log(beforeCreate);
}created创建后在实例创建完成后立即被调用。在这一步实例已经完成了以下的配置数据观测 (data observer)属性和方法的运算watch/event listener 都已经初始化但还没有挂载到 DOM 上。
created() {console.log(created);
}beforeMount载入前在组件挂载之前调用。在这一步Vue 实例已经编译模板但是还没有挂载到 DOM 上。
beforeMount() {console.log(beforeMount);
}mounted载入后在组件挂载之后调用。在这一步Vue 实例已经将模板编译成的虚拟 DOM 渲染到实际的 DOM 上。
mounted() {console.log(mounted);
}beforeUpdate更新前在数据更新之前调用。在这一步Vue 实例的数据已经更新但是虚拟 DOM 还没有重新渲染。
beforeUpdate() {console.log(beforeUpdate);
}updated更新后在数据更新之后调用。在这一步Vue 实例的数据已经更新虚拟 DOM 也已经重新渲染。
updated() {console.log(updated);
}activated激活在组件被激活时调用。当一个组件被复用时例如在一个 keep-alive 标签中这个钩子会被调用。
activated() {console.log(activated);
}deactivated停用在组件被停用时调用。当一个组件离开 keep-alive 标签时这个钩子会被调用。
deactivated() {console.log(deactivated);
}beforeDestroy销毁前在实例销毁之前调用。此时实例仍然完全可用。
beforeDestroy() {console.log(beforeDestroy);
}destroyed销毁后在实例销毁之后调用。此时所有的子实例、事件监听器和事件发射器都会被清理掉。
destroyed() {console.log(destroyed);
}errorCaptured错误捕获当捕获到一个来自子孙组件的错误时调用。这个钩子会收到三个参数错误对象、发生错误的组件实例以及完整的错误堆栈信息。
errorCaptured(err, instance, info) {console.log(errorCaptured, err, instance, info);
}
