千锋教育前端Vue3.0全套视频教程(Kerwin2023版,Vue.js零基础

- Vue组件生命周期钩子函数是在组件不同阶段执行的特定函数。这些钩子函数提供了在组件生命周期中执行自定义逻辑的机会。生命周期钩子函数主要有四个阶段,八个函数:beforeCreate:作用:在实例被创建之前调用,此时组件的选项和数据尚未初始化。
created:作用:在实例创建完成后调用,此时组件的选项和数据已经初始化。
beforeMount:作用:在组件挂载之前调用,此时模板编译已完成,但尚未将组件渲染到页面中。
mounted:作用:在组件挂载到页面后调用,此时组件已经被渲染到页面中。
beforeUpdate:作用:在组件更新之前调用,此时数据已更新但尚未重新渲染组件。
updated:作用:在组件更新完成后调用,此时组件已重新渲染到页面中。
beforeDestroy:作用:在组件销毁之前调用。
destroyed:作用:在组件销毁完成后调用。
2.Vue 的父子组件生命周期钩子函数执行顺序:
Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分:
第一部分:首次加载渲染
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted。
第二部分:父组件修改子组件的props值时:
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
第三部分:父组件修改的数据跟子组件没有关系时,
不会影响子组件 父 beforeUpdate -> 父 updated
第四部分:销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed