vue 2.x 升级vue3.x 需要注意什么

• Vue 2.x 升级到 Vue 3.x 过程中需要注意的事项

• 项目脚手架：
• 核心 API 更改：
• 第三方库兼容性：
• Vue Router 和 Vuex 更新：
• 构建工具变更：
• 类型检查：
• 性能优化：

• 示例代码

• 项目初始化与构建工具：
• 核心 API 变更：从 Options API 到 Composition API
• 生命周期钩子重命名：
• 过滤器移除：
• 指令语法变化：
• 第三方库兼容性：
• TypeScript 支持增强：
• 其他新特性及优化：

写在前面

vue2.x升级到vue3 做好充分的准备和团队，以及领导沟通清楚，步骤以及面临的风险，以及应急准备，以及知识储备和人员储备。

就比如搞了一半发现领导根本对vue升级的急迫性没那么强烈，中途给你把资源撤了，半拉子烂摊子毁在你的手里，瞬间挫败感笼上心头。

记住资源是团队作战中很重要的事情，提前给团队和领导信心和目标。

在升级之前，需要做好充分的准备和规划。有的时候干成一件事，也许技术上根本不是障碍。

Vue 2.x 升级到 Vue 3.x 过程中需要注意的事项

Vue 2.x 升级到 Vue 3.x 过程中需要注意的事项较多，以下是一些关键点和常见变化：

项目脚手架：

• 如果是基于 vue-cli 创建的项目，需要将脚手架升级至支持 Vue 3 的版本。
• 使用 @vue/cli 创建新项目并选择 Vue 3 模板。

核心 API 更改：

• 选项式 API 到 Composition API：

• Vue 3 引入了 Composition API（setup 函数），它提供了更灵活的状态管理和逻辑复用方式。原有的 data、methods、computed 和 watch 需要转换为使用 ref、reactive、computed 等新的响应式API。
• 示例中的问题：在 setup 中使用 watch 监听 reactive 对象属性时，直接修改数组不会触发 watcher，因为需要使用 toRefs 或 .value 来访问或修改数组内容才能确保响应性。

• 生命周期钩子重命名：

• 一些生命周期钩子名称发生了更改，例如 beforeCreate 变为 onBeforeMount，created 变为 onMounted 等。

• 过滤器（Filters）移除：

• Vue 3 中不再支持全局和局部过滤器，需要通过自定义函数或者在模板内使用 JavaScript 表达式来替代。

• 指令语法变化：

• v-model 在组件上使用的方式有所改变，可能需要调整为 v-model:propName 或者使用新的 modelValue 和 update:modelValue 组合。

第三方库兼容性：

• 检查所使用的插件、库和 UI 框架是否已经支持 Vue 3，并相应地进行更新。

Vue Router 和 Vuex 更新：

• Vue Router 和 Vuex 都有对应的 Vue 3 版本，需要升级这些依赖包并按照 Vue 3 的要求重构相关代码。

构建工具变更：

• Webpack 配置可能会随着 Vue CLI 的更新而有所调整，确保 webpack 的配置与 Vue 3 兼容。

类型检查：

• Vue 3 对 TypeScript 支持更好，建议在升级过程中考虑引入 TypeScript 来提高代码质量。

性能优化：

• Vue 3 对编译器和运行时做了大量优化，比如 Fragment（片段）、Suspense、Teleport 等新特性，以及对事件处理和虚拟 DOM 更新算法的改进，需要根据新特性调整代码。

在实际迁移过程中，应当参照官方提供的迁移指南逐步进行，并结合项目的具体情况测试升级后的功能和性能。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

示例代码

Vue 2.x 升级到 Vue 3.x 过程中需要注意的关键变更和转换示例包括：

项目初始化与构建工具：

• 确保使用支持 Vue 3 的 @vue/cli 版本创建或迁移项目。
• 如果是手动升级，需要更新 webpack 配置等构建工具以兼容 Vue 3。

核心 API 变更：从 Options API 到 Composition API

• Vue 3 引入了 Composition API，它提供了更为灵活的状态管理和逻辑复用方式。例如，在 Vue 2 中你可能有如下代码：

// Vue 2
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log('Count changed:', newVal);
    }
  },
  mounted() {
    this.increment();
  }
};

在 Vue 3 中，你需要将其改写为：

// Vue 3 使用Composition API
import { ref, onMounted, computed, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    const doubleCount = computed(() => count.value * 2);

    // watchEffect 监听依赖项变化（这里会自动监听count）
    watchEffect(() => {
      console.log('Count changed:', count.value);
    });

    onMounted(increment);

    return {
      count,
      increment,
      doubleCount
    };
  }
};

生命周期钩子重命名：

• Vue 3 对生命周期钩子进行了调整，如 beforeCreate -> onBeforeMount、created -> onMounted 等。

过滤器移除：

• Vue 2 中的过滤器在 Vue 3 中被废弃，可以使用自定义函数替代：

// Vue 2
{{ message | capitalize }}

// Vue 3 替代方案
<script>
  import { ref } from 'vue';
  
  function capitalize(text) {
    return text.charAt(0).toUpperCase() + text.slice(1);
  }
  
  export default {
    setup() {
      const message = ref('');
      const formattedMessage = computed(() => capitalize(message.value));
      return { message, formattedMessage };
    }
  }
</script>
<template>
  {{ formattedMessage }}
</template>