理解vue生命周期

Vue生命周期

---

Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，在Vue的整个生命周期中提供很多钩子函数在生命周期的不同时刻调用，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

实例代码：

    
    
    
    
    



    
{
    {message}}

vue挂载组件优先级

vue生命周期过程

• beforeCreate：初始化组件，没有加载data数据和methods函数，只是加载额外的东西。
• created：加载绑定组件数据、data数据和methods函数，完成事件回调，计算属性和methods函数挂载，不过依然没有加载el元素。
• beforeMount：完成页面解析，并在内存中解析指令和数据，页面模块存在于内存中，没有渲染DOM。
• mounted：把内存中的所有的data数据和methods、el元素，渲染到DOM对象中并在页面显示。
• beforeUpdated：数据更新前，所有元素依然存在，并可以访问。
• updated ：渲染数据更改后的数据，并页面显示。
• beforeDestory：销毁数据前，所有的数据依然存在。
• destroyed：销毁数据，包括所有的组件、对象、监听事件，全部被销毁，并无法在页面显示。

转载地址