Vue生命周期函数

vue2生命周期函数

• beforeCreate：实例Vue，未初始化和响应式数据
• created：已初始化和响应式数据，可访问数据、方法
• beforeMount：render调用，虚拟DOM生成，未转真实DOM
• mounted：真实DOM挂载完成
• beforeUpdate：数据更新，新虚拟DOM生成
• updated：新旧虚拟DOM进行对比，真实DOM更新
• beforeDestroy：实例销毁前，仍可访问数据
• destroy：实例销毁，子实例销毁，指令解绑，解绑本实例的事件
• activated：keep-alive所缓存组件激活时调用
• deactivated：keep-alive所缓存组件失活时调用
• errorCaptured：子孙组件的错误捕获，此函数可返回false阻止继续向上传播

动态组件与keep-alive

 
<keep-alive>
     
    <component :is="compName">component>
keep-alive>

属性：

• is 指定缓存的组件，组件需要有name属性

• include - 字符串或正则表达式。指定缓存的组件。组件中需要写name属性

• exclude - 字符串或正则表达式。指定不缓存的组件。

• max - 数字。最多可以缓存多少组件实例。

父子组件生命周期顺序？

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

vue3生命周期函数