vue2生命周期详解

1、vue2生命周期详解

（1）vue实例创建与挂载的过程

1️⃣ new Vue();

2️⃣ 加载生命周期方法以及事件

3️⃣ beforeCreate();

4️⃣ 读取vue实例的所有配置项：data,computed,methods,watch,components....

读取data时，data属性需要数据观测；

读取computed时，只是读取到computed里面的每个配置项，而里面的函数不会执行，只有当代码访问了这个函数才执行里面的计算。

5️⃣ created();

6️⃣ 判断是否有el配置项

如果没有el：等待$mount()动态挂载，如果一直不执行挂载，此时实例是创建好了，但是实例的整个生命周期过程不再往下进行了，也不能操作dom，只能操作实例本身内容。

如果有el：判断是否有template配置项

如果没有template：

把el选择器所对应的dom当成template进行编译，注意，编译template是编译template中的值，但是这个值还在js中，还没有去到页面上，页面还是空的

如果提供了render渲染函数，等价于提供了template，此时需要将脚手架工具配置项runtimeCompiler：false，默认值就是false

如果有template：

需要将脚手架工具配置项runtimeCompiler：true

7️⃣ beforeMount();

8️⃣ 将编译好的template替换在el选择器对应的dom结构中

9️⃣ mounted();

（2）生命周期有个反复执行♻️的操作：更新

当数据已经发生变化后，再执行以下2个生命周期函数

1️⃣ beforeUpdate(); //dom更新前

2️⃣ 将新的数据渲染在dom结构

3️⃣ updated(); //dom更新后

（3）销毁

1️⃣ 执行$destroy();

2️⃣ beforeDestroy();

3️⃣ 移除数据监听，事件监听，子组件等

4️⃣ destroyed();

2、vue2生命周期代码示例

  
    
    
    
    
    
  
  
    


      
test h1
      
test p 

      
{{title}}
      

    
    
  

import Vue from 'vue'
import App from './App.vue'

var vm = new Vue({
  el: '#app',

  // template: `

  //               
{{title}}
  //            
`,

  // render: (h)=>h(App),

  data: {
    title: 'App',
    list: []
  },
  methods: {
    testAction() {
      console.log(this.title);
    }
  },

  beforeCreate() {
    //实例创建前
    console.log('beforeCreate...');
    console.log(this.title);//undefined
    this.testAction();//报错
  },
  created() {
    // 实例创建完成,在这个生命周期函数执行之后都可以访问vue实例的配置项上的内容
    // 可以在这个生命周期请求数据,在这可以把请求到的数据复制给data里的某个属性
    console.log('created...');
    console.log(this.title);//有值
    this.testAction();//有值
  },
  beforeMount() {
    console.log('beforeMount...');
    console.log(document.querySelector('#app'));//可以取到这个dom对象
    console.log(document.querySelector('.wrap'));//null
  },
  mounted() {
    //挂载
    //操作dom
    console.log('mounted...');
    console.log(document.querySelector('#app'));//null
    console.log(document.querySelector('.wrap'));//可以取到这个dom对象
  },
  beforeUpdate() {
    console.log('beforeUpdate...');
    console.log(this.title);//与updated()里打印的this.title一样
    console.log(document.querySelector('p:nth-of-type(2)').innerText);//dom更新前的值
  },
  updated() {
    //更新数据告诉后台
    console.log('updated...');
    console.log(this.title);//与beforeUpdate()打印的this.title一样
    console.log(document.querySelector('p:nth-of-type(2)').innerText);//dom更新后的值
  },
  beforeDestroy() {
    console.log('beforeDestroy...');
    // 释放资源：闭包的引用等
  },
  destroyed() {
    console.log('destroyed...');
  }

})//.$mount('#app')

setTimeout(() => {
  vm.$destroy();
}, 2000);

3、vue2生命周期图示