最新 Vue 生命周期 V2.0 VS V3.0 对比总结

猫头虎

发布于 2024-04-07 17:08:53

23900

代码可运行

文章被收录于专栏：猫头虎博客专区猫头虎博客专区

运行总次数：0

代码可运行

V2:

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列</title>
</head>
<body>
<div id="app">
    <h1 id="h1">{{msg}}</h1>
    <input type="text" v-model="msg">
    <button @click="demo">改变数据</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "vue生命周期"
        },
        methods: {
            demo() {
                this.msg = "变化之后数据";
            }
        },
        computed: {},
        beforeCreate() {//这是第一个生命周期函数 这个函数执行时候 vue完成自身内部事件 生命周期函数注册
            console.log("beforeCreate:", this.msg);
        },

        created() {   //这是第二个生命周期函数 这个函数执行时候 vue完成自身内部事件 生命周期函数注册 自定义 data methods,computed 注册
            console.log("created:", this.msg);
        },
        beforeMount() { //这是第三个生命周期函数 这个函数执行的时候vue将el指向html编译为template,还没有template中数据渲染
            var innerText = document.getElementById("h1").innerText;
            console.log("beforeMount:", innerText);
        },
        mounted() {  //这是第四个生命周期函数 这个函数执行的时候vue根据template进行复制并创建虚拟dom替换el指向html 此时页面渲染完成之后数据
            var innerText = document.getElementById("h1").innerText;
            console.log("mounted:", innerText);
        },
        beforeUpdate() {//这是运行阶段第一个函数,当这个函数执行时候此时data中数据已经发生变化,但是页面中数据还没有变化
            console.log("beforeUpdate:", this.msg);
            var innerText = document.getElementById("h1").innerText;
            console.log("beforeUpdate:", innerText);
        },
        updated() {//这是运行阶段第二个函数,当这个函数执行时候此时data中数据和view中数据一致
            console.log("updated:", this.msg);
            var innerText = document.getElementById("h1").innerText;
            console.log("updated:", innerText);
        },
        beforeDestroy() {//销毁阶段 第一个生命周期函数 这个函数执行时候 刚开始销毁 此时存在事件监听 双向绑定机制...
            console.log("beforeDestroy:", "==========");
        },
        destroyed() {//销毁阶段 第二个生命周期函数 这个函数执行时候 此时存在事件监听 双向绑定机制全部销毁
            console.log("destroyed:", "==========");
        }

    })
</script>

V3:

生命周期钩子

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // `this` 指向 vm 实例
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 unmounted。生命周期钩子的 this 上下文指向调用它的当前活动实例。

TIP

不要在选项 property 或回调上使用箭头函数

，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

v3生命周期图示

下图展示了实例的生命周期。我们不需要立马弄明白所有的东西，不过随着不断学习和使用，它的参考价值会越来越高。

总结:

VUe2.0 和 Vue3.0 的生命周期作对比

beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~ setUp这个生命周期发生在beforeCreate和created之前的哈。两种形式的生命周期函数是可以共存，它们都会被执行。

<template>
  <div>
    生命周期
  </div>
</template>
<script>
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from "vue";
export default {
  name: "App",
  setup() {
    console.log("类似于created")

   //  挂载的生命周期
   onBeforeMount(()=>{
      console.log("Vue3.0类似于beforeMount ");
   })

  onMounted(()=>{
      console.log("Vue3.0类似于mounted ");
  })

  //   跟新阶段的生命周期
  onBeforeUpdate(()=>{
      console.log("Vue3.0类似于beforeUpdate ");
   })

    onUpdated(()=>{
      console.log("Vue3.0类似于 updated  ");
   })


  // 销毁阶段生命周期
  onBeforeUnmount(()=>{
      console.log("Vue3.0类似beforeDestory ");
   })

    onUnmounted(()=>{
      console.log("Vue3.0类似于destoryed ");
   })

  },


  beforeCreate(){
    console.log( 'vue2.0 beforeCreate' )
  },
  created(){
    console.log( 'vue2.0 created' )
  },
  beforeMount(){
    console.log( 'vue2.0 beforeMount' )
  },
  mounted(){
    console.log( 'vue2.0 mounted' )
  },
  beforeUpdate(){
    console.log( 'vue2.0 beforeUpdate' )
  },
  updated(){
    console.log( 'vue2.0 updated' )
  },

  // vue3中你仍然可以去使用vue2的生命周期。
  // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount
  //                destroyed==> unmounted
  // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
  // setUp这个生命周期发生在beforeCreate和created之前的哈。
  beforeUnmount() {
    console.log( 'vue2.0 beforeDestroy' )
  },
  //destroyed==> unmounted
  unmounted(){
    console.log( 'vue2.0 destroyed' )
  }
};
</script>