Vue 2 转移到 Vue 3 清单

在将Vue 2项目迁移到Vue 3时，需要关注以下主要步骤和需要修改的部分：

1. 更新项目依赖：

   • 移除旧的Vue 2依赖。
   • 安装Vue 3依赖。

2. 更新项目配置：

   • 修改vue.config.js（如果存在）以确保与Vue 3兼容。

3. 更新组件：

   • 修改单文件组件（*.vue文件），确保模板、脚本和样式部分都兼容Vue 3。
   • 使用Composition API替代Mixins和Vue实例选项。

4. 更新生命周期钩子：

   • 根据Vue 3的生命周期钩子进行更新，如beforeDestroy更新为beforeUnmount。

5. 更新其他特性：

   • 移除this.$refs的使用，改用ref属性和toRefs。
   • 移除过滤器，使用方法或计算属性替代。
   • 移除keyCode作为v-on的修饰符，使用key事件监听器。

6. 使用Vue 3的新特性：

   • 如果适用，可以开始使用Composition API。
   • 利用Fragment、Teleport等新组件。

7. 测试：

   • 在迁移后进行全面测试，确保应用的功能和用户体验没有受到影响。

以下是一个简单的示例，展示如何更新Vue 2的模板以适应Vue 3：

Vue 2 模板:

<template>
  <div>
    {{ msg }}
    <button v-on:click="greet">Say Hi</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    greet: function() {
      alert(this.msg);
    }
  }
}
</script>

Vue 3 模板:

<template>
  <div>
    {{ msg }}
    <button @click="greet">Say Hi</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup() {
    const msg = ref('Hello');
    function greet() {
      alert(msg.value);
    }
    return { msg, greet };
  }
}
</script>

注意：具体迁移细节可能依赖于项目的复杂性和使用的Vue 2特性，因此这只是一个基础的指南。