vue的生命周期

目录

前言

    Vue框架

    MVVM模式(实现双向数据绑定)

生命周期

  实例创建阶段

  实例挂载阶段

  实例更新阶段  

  实例销毁阶段  

生命周期图示

 代码演示:


前言

    Vue框架

        上层框架 只关注数据驱动 借鉴MVVM模式 

    MVVM模式(实现双向数据绑定)

        M---Model层 数据模型层
        V---View   视图层
        VM---ViewModel层 视图数据层 
        M层发生变化VM层中得Data Bindings监听到M层变换通知V层及时更新
        V层发生变化VM层中得DOM Listeners监听到V层变化通知M层及时更新

生命周期

  从vue实例创建到虚拟dom产生到数据绑定数据监听到销毁得过程

  实例创建阶段

    beforeCreate 实例创建前
      初始化默认事件和默认生命周期,此时实例还没创建完成,无法访问data数据和methods方法
    created 实例创建完成
      初始化数据注入和数据监听,此时实例创建完成,可以访问data数据和methods方法
      最早得异步请求

  实例挂载阶段

    beforeMount 实例与模板绑定之前 完成模板编译
      查看有无el选项,有查看有无template选项,没有template选项会把el外部html作为模板编译,
      有el选项,有template选项,将template作为模板使用render函数编译。如果没有el选项,使用
      实例方法$mount()完成模板编译
      此时模板与实例还未绑定 无法访问dom元素
    mounted 实例与模板绑定完成 创建$el代替el选项
      此时可以访问dom元素

  实例更新阶段  

    只要数据发生改变就会触发生命周期
    beforeUpdate 实例更新前 
      此时可以获取到最新得数据 但是使用到数据dom元素还未更新完成  旧dom元素
    updated
      此时可以获取到最新得数据 使用到数据dom元素更新完成  新dom元素

  实例销毁阶段  

    $destroy销毁组件
    beforeDestroy 实例销毁前 此时可以修改数据和方法
    destroyed 实例销毁完成 此时移除监听器、子组件和事件监听,修改数据和方法失败,但是可以访问

生命周期图示

vue的生命周期_第1张图片

 代码演示:





    
    
    Document
    
    



    
    
{{msg}}

你可能感兴趣的:(vue.js,前端,前端框架)