vue2生命周期详解

Posted 2023-04-08 EchoLiner

1、vue2生命周期详解

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

👉new Vue();

👉加载生命周期方法以及事件

👉beforeCreate();

👉读取vue的所有配置项：读取vue实例的data属性，data属性需要数据观测；读取配置项computed,methods,watch,components....

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

👉created();

👉判断是否有el配置项

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

👉判断是否有template配置项

(如果没有，把el选择器所对应的dom当成template进行编译)

(如果没有template，提供了render渲染函数，等价于提供了template)

(如果配置项使用template，需要将脚手架工具配置项runtimeCompiler：true)

(如果配置项使用render，没有使用使用template，需要将脚手架工具配置项runtimeCompiler：false，默认值就是false）

⚠️注意：编译模板template：也就是编译template中的值，但是这个值还在js中，还没有去到页面上，页面还是空的<div id="app"></div>

👉beforeMount();

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

👉mounted();

（2）生命周期有个循环♻️操作：更新

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

👉beforeUpdate(); //dom更新前

👉将新的数据渲染在dom结构

👉updated(); //dom更新后

（3）销毁

👉执行$destroy();

👉beforeDestroy();

👉移除数据监听，事件监听，子组件

👉destroyed();

4、vue2生命周期代码示例

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

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

  // template: `<div class="wrap">
  //               <h1>title</h1>
  //            </div>`,

  // 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);

5、vue2生命周期图示

vue生命周期详解

参考技术A vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

vue生命周期包括四个阶段，8个钩子函数，作用在某个阶段给你一个做某些处理的机会。

beforeCreate、created、beforeMount，mounted

beforecreate：可以在这加个loading事件，在加载实例的时候触发；
created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
mounted：挂在元素，获取到DOM节点；
updated：如果对数据统一处理，在这里写上相应函数；
beforeDestory：可以做一个确认停止事件的确认框nextTick，更新数据后立即操作dom；

created不能操作DOM节点，mounted可以操作DOM节点；

created/beforeMount/mounted

创建前/后：在beforeCreated阶段，vue实例的挂载完el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会在触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。