vue2生命周期beforedestory vue2生命周期的区别

转载

架构设计师之光 2024-05-21 14:56:52

概念

首先，我们了解一下"生命周期"这个词。通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。

vue2生命周期：（8个阶段）

beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)

Vue第一次页面加载会触发beforeCreate created beforeMount mounted四个钩子函数，DOM渲染在mounted这个周期就已经完成

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
        <h3>{{num}}</h3>
        <button @click="num++">+</button>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      title: "Hello Vue!",
      num:0
    };
  },
  
  methods:{
      show(){
          console.log('我是show方法');
      },
      
  },
  beforeCreate() {
    console.log("-------beforeCreate--------");
    /* 
      beforeCreate钩子函数在组件创建之前被调用，该函数被调用的时候，props,data,mehtods都没有被创建
      该组件的用处不是很大，但地位很高。
    */
    console.log("data", this.msg);
    //console.log('props',this.title);
    //this.show();
  },
  created(){
        console.log("-------created--------");
        /* 
          created钩子函数是在init Injections&Activitys之后被调用，此时已经完成props,data,methods的创建，所以在此处
          调用这些方法或方法
          模板或者DOM还没有被创建
          此钩子函数重要的用途是用来向服务端获取网络请求数据
          在此钩子函数之后的钩子中也能完成网络请求，但是一般都是在这里完成最佳
        */
      
        this.show();
       
  },
  beforeMount(){
    console.log('-------beforeMount--------');
    /* 
      该钩子函数之前的环节主要工作是将数据读取后填充到模板上，之后有读到内存中暂时存储
    */
   console.log('dom',document.querySelector('h2')); 
  },
  mounted(){
     console.log('-------mounted--------');
     console.log('dom',document.querySelector('h2'));
  },
  beforeUpdate(){
    console.log('---------beforeUpdate-----------');
    /* 
      beforeUpdate钩子函数中的特征
      数据已经变了
      但是页面还没来得及渲染
      数据是新的，而页面是旧的
    */
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  updated(){
    console.log('---------updated-----------');
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  beforeDestroy(){
    console.log('-----------beforeDestroy--------------');
    /* 
      此处是准备在销毁之前调用的钩子
      此处特征，数据props，data,methods都可以访问，但是DOM已经被移除了
    */
     console.log('data',this.num);
    // console.log('dom',document.querySelector('h3').innerHTML);
  },
  destroyed(){
     console.log('-----------destroyed--------------');
     console.log('data',this.num);
  }
};
</script>

<style>
</style>

生命周期图示：

vue2生命周期beforedestory vue2生命周期的区别_生命周期

vue3生命周期：

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数；
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
    console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
        console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
        console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
        console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
    console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
        console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>

vue2和vue3 区别

1，vue2和vue3双向数据绑定原理发生了改变

vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。
vue3中使用了ES6的Proxy API对数据代理。
相比vue2.x，使用proxy的优势如下：

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2， vue2和vue3定义数据变量和方法的改变

在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。
而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得 return。
如：

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    //使用ref，说明这个数组就是全局在面板中可以使用了
    const girls = ref(['美女1','美女2','美女3'])
    const selectGirl = ref('2')
    //设置一个函数
    const selectGirlFun = (index: number) => {
      //改变selectGirl的值要加value
      //要得到值要加value ，这些都因为使用了ref函数
      selectGirl.value = girls.value[index]
    }
    //在标签中使用的变量要使用return
    //为什么要使用return，因为有的不需要在标签中使用的就不用return
   return{
      girls,
      selectGirl,
      selectGirlFun
    }
  },
});
</script>

3，vue2和vue3生命周期钩子函数的不同

vue2中的生命周期

beforeCreate 组件创建之前
created 组件创建之后
beforeMount 组价挂载到页面之前执行
mounted 组件挂载到页面之后执行
beforeUpdate 组件更新之前
updated 组件更新之后

vue3中的生命周期

setup 开始创建组件
onBeforeMount 组价挂载到页面之前执行
onMounted 组件挂载到页面之后执行
onBeforeUpdate 组件更新之前
onUpdated 组件更新之后
而且Vue3.x 生命周期在调用前需要先进行引入。
如：

import {
 reactive,
 toRefs,
 onMounted,
 onBeforeMount,
 onBeforeUpdate,
 onUpdated,
} from "vue";

来一个总的生命周期对比，这样更便于记忆

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外，Vue3.x还增加了onRenderTracked 和onRenderTriggered函数。