Vue2 Vue3 生命周期

 

 

 Vue2:

<template>
  <span>
    <span id="msg">{{msg}}</span>
    <input type="button" value="修改" @click="f1">
  </span>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'HelloWorld'
      }
    },
    methods: {
      hello(str) {
        console.log(str + 'hello')
      },
      f1() {
        this.msg = 'HelloVue'
      }
    },
    beforeCreate() {
      // beforeCreate在Vue实例创建之前，data中的数据和methods中的方法并没有初始化
      // console.log('beforeCreate:' + this.msg) // undefined
      // this.hello('beforeCreate:') // 报错
    },
    created() {
      // 在created生命周期函数中，data中的数据和methods中的方法已经被初始化完成
      console.log('created:' + this.msg) // HelloWorld
      this.hello('created:') // hello
    },
    beforeMount() {
      // 在beforeMount生命周期函数中，Vue开始编译模板、渲染数据，但数据只是在内存中渲染的，并没有真实挂载到HTML页面上
      console.log('beforeMount:' + this.msg) // HelloWorld
      // console.log('beforeMount:' + document.getElementById('msg').innerText)
      console.log('beforeMount:' + document.getElementById('msg')) // null
    },
    mounted() {
      // mounted生命周期函数，内存中的数据已经挂载到页面中，Vue实例创建完成
      console.log('mounted:' + document.getElementById('msg').innerText) // HelloWorld
    },
    beforeUpdate() {
      // beforeUpdate，Vue只是在内存中完成了编译，并没有挂载到真实页面中
      console.log('beforeUpdate:' + this.msg) // HelloVue 是新的
      console.log('beforeUpdate:' + document.getElementById('msg').innerText) // HelloWorld 是旧的
    },
    updated() {
      // updated,把内存中修改后的数据挂载到页面中
      console.log('updated:' + this.msg) // HelloVue 是新的
      console.log('updated:' + document.getElementById('msg').innerText) // HelloVue 是新的
    }
  }
</script>

　　

Vue3:

<template>
	<span>
		<span id="msg">{{msg}}</span>
		<input type="button" value="修改" @click="f1">
	</span>
</template>

<script setup>
    import {
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated,
        onErrorCaptured,
        ref
    } from "vue"

    var msg = ref("HelloWorld");

    function f1() {
        console.log("f1:" + msg.value)
        msg.value = 'HelloVue'
    }

    onBeforeMount(() => {
        // 在beforeMount生命周期函数中，Vue开始编译模板、渲染数据，但数据只是在内存中渲染的，并没有真实挂载到HTML页面上
        console.log('beforeMount:' + msg.value) // HelloWorld
        // console.log('beforeMount:' + document.getElementById('msg').innerText)
        console.log('beforeMount:' + document.getElementById('msg')) // null
    })

    onMounted(() => {
        // mounted生命周期函数，内存中的数据已经挂载到页面中，Vue实例创建完成
        console.log('mounted:' + document.getElementById('msg').innerText) // HelloWorld
    })

    onBeforeUpdate(() => {
        // beforeUpdate，Vue只是在内存中完成了编译，并没有挂载到真实页面中
        console.log('beforeUpdate:' + msg.value) // HelloVue 是新的
        console.log('beforeUpdate:' + document.getElementById('msg').innerText) // HelloWorld 是旧的
    })

    onUpdated(() => {
        // updated,把内存中修改后的数据挂载到页面中
        console.log('updated:' + msg.value) // HelloVue 是新的
        console.log('updated:' + document.getElementById('msg').innerText) // HelloVue 是新的
    })

</script>

　　

 

官方文档: 

https://v2.cn.vuejs.org/v2/guide/instance.html#生命周期图示

https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子

https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram 生命周期图示vue3