vue的学习之路（Vue 生命周期）

2022-06-26 05:13:53

vue的学习之路（Vue 生命周期）

在学习vue生命周期之前，建议先学习

Vue学习之路（基础篇）

vue实现购物车功能

vue的学习之路（Axios 基本使用）

Vue 实例生命周期 ===> java 对象生命周期(初始化阶段运行阶段销毁阶段 ) 生命周期钩子 ====> 生命周期函数

Vue实例从创建到销毁过程中自动触发一些列函数 ====> Vue生命周期函数(钩子)

new Vue({   
el:"",
data:{},
computed:{},
methods:{}
//声明周期函数定义位置
beforeCreate(){

}
})

1、生命周期初始化阶段

new Vue(): 仅创建对象，内部数据暂时没有，初始化

初始化事件和生命周期 :初始化内部的默认事件，声明周期函数

beforeCreate:声明周期函数一：此时仅仅初始化了内部事件函数等，外部数据还没有

    beforeCreate(){
      console.log("beforeCreate"+this.msg);
    }

vue的学习之路（Vue 生命周期）

初始化注入和校验：初始化定义

created: 声明周期函数二：此时自定义的内容被全部加载完成

   created(){
      console.log("Created: "+this.msg);
    }

vue的学习之路（Vue 生命周期）

是否指定“el”选项？：判断vue实例是否含有作用范围

是否指定“template”选项？：判断vue实例是否含有组件

将el外部的HTML作为template编译*：将el指定的标签作为模板（div）

beforeMount :声明周期函数三：此时el指定的标签就是vue实例的作用范围，会被当做模板编译

  beforeMount(){   //el指定作用范围还是原始的内容
      console.log("beforeMount: "+document.getElementById("app").innerText);
    }

vue的学习之路（Vue 生命周期）

创建vm.$el并用其替换“el” ：在内存中创建el标签对应的模板。同时渲染数据{{msg}}——》"生命周期测试",用内存中的虚拟模板替换原有页面中的内容

mounted 生命周期函数四：此时el指定

  mounted(){  //el指定的作用范围，已经被虚拟化处理 并替换之后的结果
      console.log("mounted: "+document.getElementById("app").innerText);
    }

vue的学习之路（Vue 生命周期）

2、生命周期运行阶段

vue的学习之路（Vue 生命周期）

beforeUpdate:生命周期函数五：c此时vue实例中的data数据发生了变化，但是页面还是原来的内容

  beforeUpload(){
      console.log("beforeUpdate:"+this.name);
      console.log("beforeUpdate:"+document.getElementById("n").innerText);
    }

虚拟DOM重新渲染并应用更新：将修改的数据内容落实到虚拟的标签对象中，此时页面才发生变化

update:生命周期六：此时vue实例中的数据才和页面一致

update(){
    console.log("update:"+this.msg);
    console.log("update:"+document.getElementById("app").innerText);
  }

vue的学习之路（Vue 生命周期）

3、生命周期销毁阶段

beforeDestroy :生命周期第7个函数，vue此时接收到销毁指令，没有实际进行销毁操作，内部数据还是完整的

接触绑定销毁子组件以及事件监听器：此时开始销毁一些组件和监听器

destroyed:生命周期八：此时vue销毁失效

  beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
     console.log("vue实例开始销毁")
    },
    destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      console.log("vue实例已经销毁，双向绑定失效")
    }

vue的学习之路（Vue 生命周期）