Vue2和Vue3生命周期有何不同？

Vue2和Vue3生命周期有何不同？我们一起来分析下吧。

Vue2生命周期简介

什么是Vue2生命周期

Vue2的生命周期，就像是一个组件从诞生到销毁所经历的一系列过程，在这个过程中有不同的阶段,每个阶段都有特定的时机可以让开发者执行自定义的代码逻辑。

Vue2生命周期钩子函数有哪些

• 创建阶段：

• beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用，组件的data和methods等属性还未初始化，无法访问到它们。

  new Vue({
  data() {
  return {
    message: 'Hello'
  }
  },
  beforeCreate() {
  console.log(this.message); // 这里会输出undefined
  }
  });

• created：实例已经创建完成之后被调用，在这一步，实例已完成数据观测、属性和方法的运算，watch/event事件回调也已配置好，此时可以访问data和methods等属性。

  new Vue({
  data() {
  return {
    message: 'Hello'
  }
  },
  created() {
  console.log(this.message); // 这里会输出Hello
  }
  });

• 挂载阶段：

• beforeMount：在挂载开始之前被调用：相关的render函数首次被调用,模板还未被渲染到页面上。

• mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子，如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内，这是一个很适合进行DOM操作和发起异步请求的时机。

  <template>
  <div id="app">
  <p ref="myParagraph">This is a paragraph</p>
  </div>
  </template>
  <script>
  export default {
  mounted() {
  console.log(this.$refs.myParagraph.textContent);
  }
  }
  </script>

• 更新阶段：

• beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，可以在这个钩子中进一步地更改状态,不会触发附加的重渲染过程。

• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，当这个钩子被调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，但要注意避免在此期间更改数据,因为这可能会导致无限循环的更新。

• 销毁阶段：

• beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用，这是一个清理一些定时器、解绑事件等操作的好时机。

  export default {
  data() {
  return {
    timer: null
  }
  },
  created() {
  this.timer = setInterval(() => {
    console.log('Timer is running');
  }, 1000);
  },
  beforeDestroy() {
  clearInterval(this.timer);
  }
  }

• destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除,所有的子实例也会被销毁。

Vue3生命周期简介

什么是Vue3生命周期

Vue3的生命周期同样是组件从创建到销毁的过程，但在Vue3中，由于组合式API的引入,生命周期的使用方式和一些细节有所变化。

Vue3生命周期钩子函数有哪些

• 创建阶段：

• setup()：在组件创建之前，在beforeCreate和created钩子之前执行，setup函数是Vue3组合式API的入口点，在这里可以进行响应式数据定义、方法定义等操作，它接收props和context作为参数。

  import { ref } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment
  };
  }
  }

• onBeforeMount：在挂载开始之前被调用，和Vue2的beforeMount类似，但在Vue3中，它是通过组合式API的方式使用。

  import { onBeforeMount } from 'vue';
  export default {
  setup() {
  onBeforeMount(() => {
    console.log('Before mount in Vue3');
  });
  }
  }

• onMounted：在组件挂载到DOM后调用，类似于Vue2的mounted。

  import { onMounted } from 'vue';
  export default {
  setup() {
  onMounted(() => {
    console.log('Mounted in Vue3');
  });
  }
  }

• 更新阶段：

• onBeforeUpdate：在数据更新导致的虚拟DOM重新渲染和打补丁之前调用，和Vue2的beforeUpdate类似。

  import { ref, onBeforeUpdate } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  onBeforeUpdate(() => {
    console.log('Before update in Vue3, count will change', count.value);
  });
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment
  };
  }
  }

• onUpdated：在虚拟DOM重新渲染和打补丁之后调用，和Vue2的updated类似。

  import { ref, onUpdated } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  onUpdated(() => {
    console.log('Updated in Vue3, count has changed', count.value);
  });
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment
  };
  }
  }

• 卸载阶段：

• onBeforeUnmount：在组件卸载之前调用，类似于Vue2的beforeDestroy。

  import { onBeforeUnmount } from 'vue';
  export default {
  setup() {
  let timer;
  const startTimer = () => {
    timer = setInterval(() => {
      console.log('Timer is running');
    }, 1000);
  };
  onBeforeUnmount(() => {
    clearInterval(timer);
  });
  return {
    startTimer
  };
  }
  }

• onUnmounted：在组件卸载后调用，类似于Vue2的destroyed。

  import { onUnmounted } from 'vue';
  export default {
  setup() {
  onUnmounted(() => {
    console.log('Component has been unmounted in Vue3');
  });
  }
  }

Vue2和Vue3生命周期的不同点

调用方式不同

• Vue2：生命周期钩子函数是在组件的选项对象中直接定义，

  export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  created() {
    console.log(this.message);
  }
  }

• Vue3：在使用组合式API时，生命周期钩子函数通过onXxx的形式在setup函数中调用。

  import { onMounted } from 'vue';
  export default {
  setup() {
    onMounted(() => {
      console.log('Mounted in Vue3');
    });
  }
  }

  这种变化使得代码结构更具逻辑性和灵活性，特别是在处理复杂组件逻辑时，所有相关逻辑可以集中在setup函数内。

生命周期钩子函数名称变化

Vue3中，为了与组合式API更好地结合，部分生命周期钩子函数名称发生了变化，Vue2中的beforeDestroy在Vue3中变为onBeforeUnmount，destroyed变为onUnmounted,这样的变化更加清晰地表达了组件从挂载到卸载的过程。

对响应式数据的处理差异

• Vue2：通过data函数返回一个对象来定义响应式数据，然后在组件的各个生命周期钩子中可以直接访问和修改这些数据。

  export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    this.count++;
  }
  }

• Vue3：在setup函数中，使用ref或reactive等函数来创建响应式数据。

  import { ref } from 'vue';
  export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
  }

  在生命周期钩子中处理响应式数据时，Vue3的方式更加直观和灵活，并且在处理复杂数据结构时，reactive函数提供了更强大的功能。

性能和优化方面

Vue3的生命周期在性能和优化方面有一定的提升，Vue3基于Proxy的响应式系统比Vue2基于Object.defineProperty的响应式系统更加高效，特别是在处理深层次对象和数组的响应式变化时，Vue3的虚拟DOM算法也有所优化，这使得在更新阶段,依赖于生命周期钩子函数的操作可能会更加高效地执行。

Vue2和Vue3的生命周期虽然本质上都是描述组件的生存周期过程，但在调用方式、钩子函数名称、响应式数据处理以及性能优化等方面存在诸多不同，开发者在从Vue2迁移到Vue3或者学习Vue3时，需要注意这些差异，以便更好地利用Vue3的新特性来开发高效、灵活的应用程序。