Vue2到Vue3，重学这5个常用的API

2023-10-06 06:14:26

作为一位深耕技术博客领域多年的专家，我深谙一篇优质文章的撰写秘诀。本文将秉承独到的观点，聚焦Vue2到Vue3过程中常用的5个API的变动，带你领略Vue生态的演进之路。

随着Vue3的横空出世，许多常用的API也悄然发生蜕变。本文将重点剖析以下几个关键变化：

生命周期钩子
v-model指令
provide/inject
watch
Composition API

生命周期钩子

Vue2和Vue3的生命周期钩子存在细微差别。Vue2中，beforeCreate和created钩子在组件实例化之前和之后触发，而Vue3将这两个钩子合并为一个称为setup的钩子。此外，Vue3还引入了新的钩子：onMounted和onUnmounted，分别在组件挂载和卸载时触发。

v-model指令

在Vue2中，v-model指令用于管理表单输入。Vue3中，v-model指令的功能更加强大，支持双向绑定、延迟更新和自定义v-model实现。

provide/inject

provide/inject是Vue3中引入的一个新特性，允许在非父子组件之间传递数据。通过provide注入数据，你可以避免使用props和emit，从而简化组件间的通信。

watch

Vue2和Vue3中的watch API用法基本一致。然而，Vue3中的watch API提供了一个额外的选项：immediate，允许你立即执行watcher，而不是等到数据更新后才执行。

Composition API

Composition API是Vue3中的一项革命性创新。它提供了一种新的方式来组织和复用组件逻辑，使用组合式函数代替选项API中的生命周期钩子和methods。Composition API可以显著提高组件的可维护性和可重用性。

技术指南

重构Vue2代码至Vue3

将beforeCreate和created钩子合并为setup钩子。
使用onMounted和onUnmounted钩子代替mounted和destroyed钩子。
使用v-model指令管理表单输入，探索其新增功能。
使用provide/inject在非父子组件之间传递数据。
利用watch API的immediate选项立即执行watcher。
探索Composition API，将组件逻辑组织为组合式函数。

示例代码

// Vue2
export default {
  beforeCreate() {},
  created() {},
  methods: {
    increment() {}
  }
};

// Vue3
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};