Vue2 VS Vue3 生命周期-CSDN博客

安宇雨 - 随手采集
2024-01-29 12:35:09
随手采集
0000-未整理-等待研究

一、生命周期的概念

Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子（也会叫生命周期函数）

二、生命周期的规律

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

三、Vue2 VS Vue3生命周期

生命周期

Vue 2

Vue 3

备注

创建阶段

beforeCreate、created

setup

vue3创建阶段只有setup

挂载阶段

beforeMount、mounted

onBeforeMount、onMounted

更新阶段

beforeMount、mounted

onBeforeUpdate、onUpdated

销毁/卸载阶段

beforeDestroy、destroyed

onBeforeUnMount、onUnMounted

vue3叫卸载阶段更合适，对应挂载阶段

四、Vue3生命周期使用

<template>  <div class="Vue3-demo">    <h2>当前求和为：{{ sum }}</h2>    <button @click="changeSum">sum+1</button>  </div></template> <!-- vue3写法 --><script lang="ts" setup name="Person">  import {     ref,     onBeforeMount,     onMounted,     onBeforeUpdate,     onUpdated,     onBeforeUnmount,     onUnmounted   } from 'vue'   // 数据  let sum = ref(0)  // 方法  function changeSum() {    sum.value += 1  }  console.log('setup')   // 生命周期钩子  onBeforeMount(() => {    console.log('挂载之前')  })  onMounted(() => {    console.log('挂载完毕')  })  onBeforeUpdate(() => {    console.log('更新之前')  })  onUpdated(() => {    console.log('更新完毕')  })  onBeforeUnmount(() => {    console.log('卸载之前')  })  onUnmounted(() => {    console.log('卸载完毕')  })</script>

五、Vue2生命周期使用

<template>    <div>{{name}}</div></template><script><!-- vue2写法 -->export default {    data(){        return {            name:'Vue 2 生命周期'        }    },    methods:{        onChangeName(){            this.name = "测试生命周期更新"        }    },    beforeCreate(){        console.log('创建前');    },    created(){        console.log('创建完毕');    },    beforeMount(){        console.log('挂载前');    },    mounted(){        console.log('挂载完毕');    },    beforeUpdate(){        console.log('更新前');    },    updated(){        console.log('更新完毕');    },    beforeDestroy(){        console.log('销毁前');    },    destoryed(){        console.log('销毁完毕');    }}</script>