一文掌握Vue3：深度解读Vue3新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理与实战

在这里插入图片描述

每次技术革新均推动着应用性能与开发体验的提升。Vue3 的迭代进步体现在性能优化、API重构与增强型TypeScript支持等方面，从而实现更高效开发、更优运行表现，促使升级成为保持竞争力与跟进现代前端趋势的必然选择。本文深度解读Vue3 响应式数据data、生命周期钩子、计算属性computed、监听watch、模板语法、指令、事件处理、组件注册、Props、emits、Mixins等新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理。

Vue3 在Vue2的基础上实现了重大技术飞跃和性能提升，为开发体验和应用性能带来了诸多实质性改进。首先，Vue3 引入了全新的Composition API，它允许开发者以更灵活、可复用的方式组织逻辑，提高了代码的可读性和维护性。其次，Vue3 对虚拟DOM进行了重构，优化了编译器和运行时性能，大幅提升了大型应用的渲染速度。同时，Vue3支持Tree-Shaking，有助于减小打包体积。另外，Vue3增强了类型推断能力，更好地兼容TypeScript，提升了开发过程中的静态检查体验。因此，升级至Vue3有助于提高开发效率、优化应用性能，同时也为未来项目发展打下坚实基础。

一、Vue2和Vue3主要的区别

Vue.js 从其2.x版本进化到3.x版本，经历了一系列的重大改进和重构，以下是Vue2和Vue3之间主要的区别以及过渡历史变迁的详解：

核心架构的变革

  1. 响应式系统：
    • Vue2：基于Object.defineProperty()实现的观察者模式，只能递归地遍历并转换对象属性，但无法检测到新增或删除的属性。
    • Vue3：采用ES6的Proxy对象代替defineProperty，实现了更高效且完整的对象代理，能深度监听对象的变化，包括属性的添加和删除。

API 设计

  1. 组件选项API vs. 组合式API：
    • Vue2：采用的是选项式API（Options API），如data、methods、computed、watch等都是独立的对象属性。
    • Vue3：引入了新的 Composition API，允许开发者通过函数的方式组织逻辑，使得代码逻辑复用性更强，尤其在大型应用中组件间的状态管理和逻辑共享更为便捷。与React Hooks设计思想相近，拉近了Vue与React语言编程方式，降低了Vue与React语言学习的成本。

生命周期钩子

  • Vue2：提供一系列生命周期钩子函数，如created、mounted等。
  • Vue3：生命周期钩子名称前缀增加了on，例如onMounted，并在Composition API中以函数形式使用，需要导入对应的生命周期钩子。

模板语法增强

  • Vue3在模板语法上做了优化，例如移除了部分限制，使模板更灵活。

指令和插槽

  • Vue3：更新了v-model的工作方式，支持更多的用法和场景，同时v-bind和v-on简化为:prop和@event，指令也有所调整，比如v-slot改为#slot。

构建工具和生态系统

  • Vue3：Vite成为官方推荐的现代前端构建工具，它基于原生ES模块提供了更快的冷启动速度和热更新体验。

性能优化

  • Vue3在内部进行了许多优化，提高渲染性能，减小体积，并支持Tree-Shaking，使得最终打包后的代码更轻量级。

过渡类名更改

  • Vue3中的一些过渡类名被重新命名以适应新的过渡系统。

生态迁移

  • Vue3推出的同时，相关的生态也在逐步升级，例如Vuex和Vue Router都有对应的Vue3版本。

总的来说，Vue3不仅在底层响应式系统上进行了革新，而且在框架设计层面提出了更现代化的编程范式，旨在解决大型应用开发中的复杂性和可维护性问题，同时也保持了对Vue2的良好兼容性，为开发者提供了平滑的迁移路径。随着时间推移，Vue3逐渐成熟并获得了广泛的应用和认可。

二、Vue3关键新特性要点

Vue3关键新特性要点的主要围绕以下几个方面：

1、响应式数据

Vue2 中的 data 是一个函数，用于返回一个包含响应式属性的对象：

// Vue2
export default {data() {return {message: 'Hello, Vue2!',user: {name: 'John Doe',age: 30}};}
};

在 Vue3 中，有两种方式来声明响应式数据，取决于你是否使用 Composition API：

使用 Options API（Vue3 中仍然保留，但不是最佳实践）：
// Vue3 (Options API)
import { reactive } from 'vue';export default {setup() {const state = reactive({message: 'Hello, Vue3!',user: {name: 'John Doe',age: 30}});return {...state};}
};
使用 Composition API（Vue3 推荐做法）：
// Vue3 (Composition API)
import { ref, reactive } from 'vue';export default {setup() {const message = ref('Hello, Vue3!');const user = reactive({name: 'John Doe',age: 30});return {message,user};}
};
  • 对于简单的数据类型（如字符串、数字、布尔值），我们可以使用 ref 创建响应式引用。
  • 对于复杂的对象或数组结构，应当使用 reactive 来创建响应式的代理对象。

这两种方式都可以使数据具有响应性，但 ref 和 reactive 提供了更细粒度的控制和更灵活的组合能力。在 Composition API 中，setup 函数取代了 Vue2 中的生命周期钩子，成为处理所有组件初始化逻辑的地方，包括响应式状态的声明。

2、生命周期钩子

Vue2 中的生命周期钩子在 Vue3 中经历了较大的调整，主要是因为引入了 Composition API。以下是 Vue2 中常见的生命周期钩子及它们在 Vue3 中的对应转换：

Vue2 的生命周期钩子：

export default {data() {return {count: 0};},beforeCreate() {// 实例初始化后，数据观测和事件配置之前},created() {// 实例创建完成后，数据观测和方法都已生效},beforeMount() {// 模板编译/渲染之前，还未生成render树},mounted() {// 虚拟DOM替换为真实DOM，组件已挂载完成},beforeUpdate() {// 数据更新时，虚拟DOM重新渲染之前},updated() {// 数据更新后，DOM已重新渲染完成},beforeUnmount() {// 卸载组件之前},unmounted() {// 卸载组件完成}
};

Vue3 中的生命周期钩子（Composition API）：

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';export default {setup() {const count = ref(0);// 创建前（Vue2的beforeCreate + created合并）onBeforeMount(() => {// 组件挂载前，响应式数据准备就绪});// 挂载时onMounted(() => {// 组件已挂载到DOM，$el等DOM相关属性可用});// 更新前onBeforeUpdate(() => {// 数据更新导致组件即将重新渲染});// 更新后onUpdated(() => {// 组件已重新渲染完成});// 卸载前onBeforeUnmount(() => {// 组件即将卸载});// 卸载后onUnmounted(() => {// 组件已完成卸载});return {count};}
};

注意Vue3中setup函数是在beforeCreate之前执行，并且没有this上下文，所有数据都是通过Composition API管理。同时，Vue3中移除了beforeDestroy，改为onBeforeUnmount，并新增了unmounted对应Vue2的destroyed钩子。

3、计算属性computed

Vue2 中的计算属性 computed 是通过 computed 选项定义的，而 Vue3 中同样有 computed，但是其用法随着 Composition API 的引入发生了变化。

Vue2 中的 computed 示例：

// Vue2
export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}}
};

Vue3 中的 computed 示例：

当使用 Options API（非 Composition API）时，Vue3 中的 computed 与 Vue2 类似：

// Vue3 (Options API)
import { computed } from 'vue';export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}}
};

然而，当使用 Composition API 时，Vue3 中的 computed 定义方式有所不同：

// Vue3 (Composition API)
import { ref, computed } from 'vue';export default {setup() {const firstName = ref('John');const lastName = ref('Doe');const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;});return {firstName,lastName,fullName};}
};

在 Composition API 中，计算属性 fullName 由 computed 函数包裹，并且依赖于其他响应式变量（这里是指 firstName 和 lastName 的 .value）。计算属性本身也是一个响应式对象，它的值会在依赖发生变化时自动重新计算。

4、 监听watch

Vue2 中的 watch 是用来监视数据变化并触发回调的，而在 Vue3 中，watch 的用法也有所改变，尤其是在使用 Composition API 的场景下。

Vue2 中的 watch 示例：

// Vue2
export default {data() {return {count: 0,name: ''};},watch: {count(newCount, oldCount) {console.log(`Count changed from ${oldCount} to ${newCount}`);},name(newValue, oldValue) {console.log(`Name changed from ${oldValue} to ${newValue}`);},// 监视对象的某个深层属性someObject: {handler(newValue, oldValue) {// ...},deep: true // 开启深度监听}}
};

Vue3 中的 watch 示例：

使用 Options API：
// Vue3 (Options API)
import { watch } from 'vue';export default {data() {return {count: 0,name: ''};},setup() {// 观察响应式数据const count = ref(0);const name = ref('');// 定义 watchwatch(count, (newCount, oldCount) => {console.log(`Count changed from ${oldCount} to ${newCount}`);});watch(name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);});// 深度观察对象const someObject = reactive({ nested: { value: 0 } });watch(() => someObject.nested.value,(newValue, oldValue) => {// ...},{ deep: true });return {count,name,someObject};}
};
使用 Composition API：
// Vue3 (Composition API)
import { ref, watch, reactive } from 'vue';export default {setup() {const count = ref(0);const name = ref('');const someObject = reactive({ nested: { value: 0 } });// 定义 watchwatch(count, (newCount, oldCount) => {console.log(`Count changed from ${oldCount} to ${newCount}`);});watch(name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);});// 深度观察对象watch(() => someObject.nested.value,(newValue, oldValue) => {// ...},{ deep: true });return {count,name,someObject};}
};

在 Vue3 中，watch 是一个函数，它接收一个 getter 函数（用于获取被监视的值）、一个回调函数（当值发生改变时调用），以及可选的配置对象。如果需要深度观察对象，需在配置对象中设置 { deep: true }。

5、模板语法

Vue2 和 Vue3 的模板语法大部分保持一致，但也有一些差异，尤其是关于指令和特性绑定的部分。以下是一些主要区别：

Vue2 模板示例：

<!-- Vue2 -->
<template><div><!-- 文本插值 -->{{ message }}<!-- v-bind 缩写 --><img :src="imageUrl" alt="Vue Logo"><!-- v-if 和 v-else --><p v-if="seen">现在你看到我了</p><p v-else>现在你看不到我</p><!-- v-for 循环 --><ul><li v-for="(item, index) in items" :key="item.id">{{ item.name }} - Index: {{ index }}</li></ul><!-- v-model 在 input 上 --><input v-model="searchText"><!-- 事件监听 --><button @click="greet">点击打招呼</button></div>
</template>

Vue3 模板示例：

<!-- Vue3 -->
<template><div><!-- 文本插值不变 -->{{ message }}<!-- v-bind 缩写依然可用 --><img :src="imageUrl" alt="Vue Logo"><!-- v-if 和 v-else 不变 --><p v-if="seen">现在你看到我了</p><p v-else>现在你看不到我</p><!-- v-for 循环不变 --><ul><li v-for="(item, index) in items" :key="item.id">{{ item.name }} - Index: {{ index }}</li></ul><!-- v-model 在 input 上，但Vue3引入了 .value 的概念 --><input v-model:value="searchText"><!-- 事件监听，@ 符号前缀不变 --><button @click="greet">点击打招呼</button><!-- Vue3 新特性：v-slot 简化 --><child-component #default="{ item }">{{ item.name }}</child-component></div>
</template>

在Vue3中，v-model 有了更严格的语法要求，需要配合.value使用，以反映Composition API中响应式属性的工作方式。此外，Vue3中的作用域插槽（ Scoped Slots ）使用了改进过的v-slot语法，可以省略 <template> 标签，并直接指定插槽名及其参数。

需要注意的是，Vue3在模板语法上的改动相对较小，大多数Vue2模板在不涉及生命周期和一些特定API的情况下，可以直接在Vue3环境中运行。不过，在迁移过程中，为了充分利用Vue3的新特性，比如Composition API，往往还需要对组件的JavaScript部分进行重构。

6、指令

Vue2和Vue3中的指令大多保持了一致性，但在Vue3中有些指令进行了优化或者新增了一些指令。以下是几个主要指令在Vue2和Vue3之间的转换：

Vue2中的指令：

<!-- Vue2 -->
<input v-model="message">
<button v-on:click="greet">Click me</button>
<p v-if="seen">Now you see me</p>
<p v-show="isActive">Visible if active</p>
<p v-bind:class="{ active: isActive }">Class binding</p>
<p v-bind:style="{ color: myColor }">Style binding</p>
<transition><div v-if="showElement">Will transition</div>
</transition>

Vue3中的指令：

<!-- Vue3 -->
<!-- v-model 指令在输入元素上仍保留，但对于自定义组件可能需要使用model选项 -->
<input v-model:value="message"><!-- v-on 事件监听在Vue3中仍然是 @ 符号，但是内部实现基于Composition API -->
<button @click="greet">Click me</button><!-- v-if 保持不变 -->
<p v-if="seen">Now you see me</p><!-- v-show 保持不变 -->
<p v-show="isActive">Visible if active</p><!-- v-bind:class 和 v-bind:style 在Vue3中继续使用，但是也可以在setup中使用动态CSS类和样式 -->
<p :class="{ active: isActive }">Class binding</p>
<p :style="{ color: myColor }">Style binding</p><!-- transition 组件在Vue3中仍然有效，但是Transition API已增强 -->
<transition><div v-if="showElement">Will transition</div>
</transition><!-- Vue3新增的v-slot指令简化了作用域插槽的写法 -->
<child-component #default="{ prop }">{{ prop }}
</child-component><!-- Vue3废弃了v-bind.sync和v-model.sync，改用.sync修饰符 -->
<!-- <child-component v-bind.sync="syncData"></child-component> -->
<child-component v-bind.sync="{ foo: localFoo, bar: localBar }"></child-component><!-- Vue3新增v-memo指令，用于提高性能 -->
<TransitionGroup><div v-for="item in items" :key="item.id" v-memo="[item.id, item.count]">{{ item.text }}</div>
</TransitionGroup>

Vue3 引入了 .value 结构以匹配Composition API中响应式对象的使用方式，所以在某些情况下，例如在v-model中会看到v-model:value这样的写法。另外，Vue3的过渡系统和作用域插槽API都有所改进，提供了更好的使用体验。

请注意，Vue3并不强制要求立即更改所有的Vue2指令写法，大部分旧有的指令在Vue3中仍能正常工作。但如果要充分运用Vue3的Composition API优势，可能会在JavaScript部分进行重构。

7、事件处理

在Vue2中，事件处理器是通过v-on指令或其缩写@来绑定到元素上的。Vue3中事件处理器的绑定方式同样如此，但是在Vue3中，随着Composition API的引入，事件处理器的定义和使用可能会有所不同。

Vue2中的事件处理器：

<template><button @click="handleClick">Click Me</button>
</template><script>
export default {methods: {handleClick(event) {console.log('Button clicked:', event);}}
};
</script>

Vue3中事件处理器的使用（Options API）：

<template><button @click="handleClick">Click Me</button>
</template><script>
export default {methods: {handleClick(event) {console.log('Button clicked:', event);}}
};
</script>

Vue3中的Options API在处理事件处理器时与Vue2并无太大差别。

Vue3中事件处理器的使用（Composition API）：

<template><button @click="handleClick">Click Me</button>
</template><script>
import { defineComponent } from 'vue';export default defineComponent({setup() {function handleClick(event) {console.log('Button clicked:', event);}return {handleClick};}
});
</script>

在Composition API中，事件处理器作为返回的对象属性之一提供给模板使用。

值得注意的是，Vue3的事件处理逻辑虽然写法相似，但底层响应式系统的改进意味着在处理事件时，如果你使用的是ref或reactive创建的状态，可能需要通过.value来访问这些状态的最新值。例如：

<template><button @click="incrementCount">{{ count }}</button>
</template><script>
import { ref, defineComponent } from 'vue';export default defineComponent({setup() {const count = ref(0);function incrementCount() {count.value++; // 注意这里使用了 .value}return {count,incrementCount};}
});
</script>

8、组件注册

在Vue2中，全局注册组件通常是这样做的：

// Vue2 全局注册组件
import MyComponent from './MyComponent.vue';Vue.component('my-component', MyComponent);

而在Vue3中，全局注册组件的方式有所改变，使用app.component()方法：

// Vue3 全局注册组件
import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';const app = createApp(App); // App 是你的根组件
app.component('MyComponent', MyComponent);// 或者，如果你使用的是Vue3.2+版本的setup语法糖
import { defineComponent } from 'vue';
const MyRegisteredComponent = defineComponent(MyComponent);
app.component('MyComponent', MyRegisteredComponent);app.mount('#app');

对于局部注册组件，在Vue2中你可能在某个组件内部这样导入并注册：

// Vue2 局部注册组件
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},// ...
}

而在Vue3中，无论是Composition API还是Options API，局部注册组件的方式与Vue2基本保持一致：

// Vue3 局部注册组件 - Options API
<script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},// ...
}
</script>// Vue3 局部注册组件 - Composition API
<script setup>
import ChildComponent from './ChildComponent.vue';
</script><template><ChildComponent />
</template>

如果使用defineComponent包裹局部注册的组件，这通常是在你需要传递props验证或者其他高级选项时，但局部注册本身并不需要这样做：

// Vue3局部注册组件（带有额外选项）
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';const localChildComponent = defineComponent({...ChildComponent,props: {// 可能会添加额外的props验证},emits: {// 添加事件声明},// 其他组件选项...
});export default {components: {LocalChildComponent: localChildComponent},// ...
}

9、Props

Vue2和Vue3中Props的使用有一些不同，Vue3引入了Composition API以及对Props的类型检查支持，使得代码更为严谨和可预测。下面是Vue2和Vue3中Props使用的基本示例：

Vue2：

// Vue2 子组件定义
export default {props: {userName: String,userAge: {type: Number,default: 20}},methods: {greet() {console.log(`Hello, ${this.userName}! You are ${this.userAge} years old.`);}},created() {this.greet();}
};// 父组件模板中使用
<ChildComponent :userName="parentUserName" :userAge="parentUserAge" />// 父组件的数据
export default {data() {return {parentUserName: 'John Doe',parentUserAge: 30};}
};

Vue3（Options API 风格）：

// Vue3 子组件定义
import { defineComponent } from 'vue';export default defineComponent({props: {userName: {type: String,required: true},userAge: {type: Number,default: () => 20 // 使用函数形式保证每次实例化时都产生新的默认值}},setup(props) {function greet() {console.log(`Hello, ${props.userName}! You are ${props.userAge} years old.`);}greet(); // 在setup里可以直接访问props，无需created等生命周期钩子return {};}
});// 父组件模板中使用
<ChildComponent v-bind="{ userName: parentUserName, userAge: parentUserAge }" />// 父组件的数据
import { ref } from 'vue';export default {setup() {const parentUserName = ref('John Doe');const parentUserAge = ref(30);return {parentUserName,parentUserAge};}
};

Vue3（Composition API 风格）：

// Vue3 子组件定义，使用defineProps和defineEmits
import { defineComponent, defineProps, withDefaults } from 'vue';const props = withDefaults(defineProps({userName: {type: String,required: true},userAge: {type: Number,default: 20}
}), {// 默认值可以在这里统一设置
});export default defineComponent({props,setup(props) {function greet() {console.log(`Hello, ${props.userName}! You are ${props.userAge} years old.`);}greet();return {};}
});// 父组件模板中使用
<ChildComponent v-bind="{ userName: parentUserName, userAge: parentUserAge }" />// 父组件的数据
import { ref } from 'vue';export default {setup() {const parentUserName = ref('John Doe');const parentUserAge = ref(30);return {parentUserName,parentUserAge};}
};

在Vue3中，Props的使用变得更具有类型安全性，通过defineProps可以更方便地声明和验证Props，而且在setup函数内部可以直接访问Props，不需要通过this关键字。同时，Vue3还允许使用withDefaults来提供默认值，确保每个实例都能得到独立的默认值副本。

10、emits

Vue2中子组件向父组件触发事件通常使用this.$emit方法，而在Vue3中，虽然仍可以使用this.$emit，但更推荐在组件选项中明确声明事件以便于类型检查和静态分析。以下是Vue2和Vue3中关于事件触发的示例：

Vue2:

// 子组件
export default {methods: {handleClick(item) {this.$emit('custom-event', item);}}
};// 父组件模板
<ChildComponent @custom-event="handleCustomEvent" />

Vue3（Option API 风格）：

// 子组件
export default {emits: ['custom-event'], // 声明将要触发的事件methods: {handleClick(item) {this.$emit('custom-event', item);}}
};// 父组件模板
<ChildComponent @custom-event="handleCustomEvent" />

Vue3（Composition API 风格）：

// 子组件
import { defineComponent, emit } from 'vue';export default defineComponent({emits: ['custom-event'], // 声明将要触发的事件setup(props, context) {function handleClick(item) {context.emit('custom-event', item);}return {handleClick};}
});// 父组件模板
<ChildComponent @custom-event="handleCustomEvent" />

在Vue3中，context.emit与this.$emit功能相同，但在Composition API中，我们通过setup函数的第二个参数context来访问它，这个context包含了attrs、slots、emit等信息。

这样做的好处是可以让IDE和其他工具更好地理解和提示组件可能发出的事件，从而提高代码质量。同时，在某些情况下，Vue3编译器能够基于emits选项进行静态检查，防止未声明的事件错误。

11、Mixins

Vue2中的Mixins在Vue3中也可以继续使用，但由于Vue3引入了Composition API，提供了一种更灵活的方式来复用和组织代码逻辑，Mixins的作用逐渐被弱化。尽管如此，你仍然可以在Vue3中按照旧的方式使用Mixins，但是为了更好的代码可读性和维护性，推荐采用Composition API的自定义hook替代。

Vue2中使用Mixins的例子：

// mixin.js
export default {data() {return {sharedData: 'From Mixin'};},methods: {mixinMethod() {console.log('This method comes from the mixin.');}}
};// MyComponent.vue
import mixin from './mixin.js';export default {mixins: [mixin],data() {return {componentSpecificData: 'From Component'};},methods: {myMethod() {this.mixinMethod();}}
};

Vue3中若继续使用Mixins：

// mixin.js
export default {data() {return {sharedData: 'From Mixin'};},methods: {mixinMethod() {console.log('This method comes from the mixin.');}}
};// MyComponent.vue
import { mixins } from 'vue';
import mixin from './mixin.js';export default mixins(mixin).extend({data() {return {componentSpecificData: 'From Component'};},methods: {myMethod() {this.mixinMethod();}}
});

然而，推荐的Vue3方式是使用Composition API的自定义hook：

// useSharedData.js
import { ref } from 'vue';export default function useSharedData() {const sharedData = ref('From Custom Hook');function mixinMethod() {console.log('This method comes from the custom hook.');}return {sharedData,mixinMethod};
}// MyComponent.vue
<script setup>
import useSharedData from './useSharedData.js';const { sharedData, mixinMethod } = useSharedData();const componentSpecificData = ref('From Component');function myMethod() {mixinMethod();
}
</script><template><!-- ... 使用sharedData和componentSpecificData... -->
</template>

在这个例子中，自定义hook useSharedData 被用来替代Vue2中的mixin，这种方式不仅避免了潜在的命名空间冲突，而且使得逻辑复用更加清晰和易于理解。

三、工具系统工程化实现Vue2转Vue3

GoGoCode 提供了易用的API，可以帮助开发者在不深入了解AST细节的情况下，轻松地对代码进行解析、转换和生成。这个工具特别有用的一个场景就是帮助开发者将Vue2的项目升级至Vue3，通过插件机制可以方便地处理Vue模板语法的迁移问题。

使用GoGoCode将Vue2项目转换为Vue3项目，通常涉及以下几个步骤：

  • 安装GoGoCode CLI工具：
    首先，在全局环境中安装GoGoCode CLI工具：

    npm install gogocode-cli -g

  • 安装Vue2到Vue3转换插件：
    需要找到对应的Vue2到Vue3转换插件，并进行安装。截至2022年初，有一个名为gogocode-plugin-vue的插件可用，但请注意，随着GoGoCode的更新迭代，插件名称或安装方法可能会有变动，请查阅最新的官方文档确认。

  • 执行转换命令：
    在Vue2项目根目录下，使用如下命令进行代码转换：

    gogocode -s ./src -t gogocode-plugin-vue -o ./src-out

    这条命令会扫描./src目录下的Vue2代码，并将其转换为Vue3代码，输出到./src-out目录。

  • 转换package.json：
    同样可以使用GoGoCode转换package.json以更新依赖项：

gogocode -s package.json -t gogocode-plugin-vue -o package.json

  • 依赖升级：
    执行完转换后，根据提示或者手动修改package.json中的依赖版本，将Vue和其他配套库如vue-router、vuex等升级至Vue3对应版本。

  • 重新安装依赖：
    更新完依赖版本后，执行：

    npm install

  • 手动调整与验证：
    尽管GoGoCode能自动化处理大量Vue2到Vue3的语法转换，但并非所有场景都能完全自动化。一些特定的API使用、生命周期钩子以及其他框架相关的变更可能需要手动调整。确保转换后的代码经过充分测试和验证，符合Vue3的最佳实践。

请务必关注GoGoCode的官方文档和社区更新，以获取最新且准确的转换指导和工具信息。由于工具的快速发展，以上步骤可能会随时间而变化。

此外，GoGoCode还具有代码语言转换的功能，不仅限于Vue，还可以应用于多种前端项目的代码迁移和升级过程中。总之，GoGoCode致力于降低代码转换的技术门槛，提高开发者的工作效率。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/3340.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于token进行登录，每次请求携带token

基于token进行登录，每次请求携带token

一&#xff0c;什么是token&#xff1f; Token&#xff0c;也称为“令牌”&#xff0c;是服务端生成的一串字符串&#xff0c;以作客户端进行请求的一个令牌&#xff0c;当第一次登录后&#xff0c;服务器生成一个Token便将此Token返回给客户端&#xff0c;以后客户端只需带上…
阅读更多...
蓝桥杯python考级整理

蓝桥杯python考级整理

4_1:算术运算符 4_2:基本语法 4_3:基本语法 4_4:列表 4_5:函数 4_6:字符串 4_7:列表 4_8:逻辑运算符 4_9:字典 4_10:函数
阅读更多...
MacOS通过命令行开启关闭向日葵远程控制的后台服务

MacOS通过命令行开启关闭向日葵远程控制的后台服务

categories: [Tips] tags: MacOS Tips 写在前面 经常有小伙伴问我电脑相关的问题, 而解决问题的一个重要途径就是远程了. 关于免费的远程工具我试过向日葵和 todesk, 并且主要使用向日葵, 虽然 MacOS 下要设置很多权限, 但是也不影响其丝滑的控制. 虽然用着舒服, 但是向日葵…
阅读更多...
tcp通信协议

tcp通信协议

#include <myhead.h> #define IP "192.168.124.73" #define PORT 8888 int main(int argc, const char *argv[]) { //创建流式套接字 int sfd socket(AF_INET,SOCK_STREAM,0); if(sfd < 0){ fprintf(stderr,"line%d",__LI…
阅读更多...
mysql的约束和表关系

mysql的约束和表关系

根据查询的结果&#xff0c;复制出一个新表 create table newTable AS select * from oldTable; create table newPeople AS select * from day2_test.people; 约束 引入&#xff1a;如果某一列如id列&#xff0c;有重复的数据&#xff0c;无法准确定位&#xff0c;有的列有空…
阅读更多...
实体店引流客户的最快方法是什么？线上短视频+直播引流！

实体店引流客户的最快方法是什么？线上短视频+直播引流！

前言&#xff1a;为什么想到写这个话题&#xff1f;因为在每周三晚在视频号白杨SEO免费直播的问题解答的时候&#xff0c;有个朋友问同城流量怎么做&#xff1f;我就以实体店举例解答说了做推荐搜索流量相结合。我想应该还有一些朋友也想知道&#xff0c;所以就分享出来&#x…
阅读更多...
组合总和(Lc39)——排序+剪枝+回溯

组合总和(Lc39)——排序+剪枝+回溯

给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被选取 。如…
阅读更多...
python的练习

python的练习

python 练习 一、练习题目二、代码概览 一、练习题目 Hello World 实例数字求和平方根二次方程计算三角形的面积计算圆的面积随机数生成摄氏温度转华氏温度交换变量if 语句判断字符串是否为数字判断奇数偶数判断闰年获取最大值函数质数判断输出指定范围内的素数阶乘实例九九乘…
阅读更多...
MyBatis多参数查询解析

MyBatis多参数查询解析

参考官网 1. 底层 底层是ParamNameResolver类查看getNameParams方法实现 2. 获取参数的两种方式 MyBatis获取参数值的两种方式&#xff1a; ${} : 本质就是字符串拼接#{} :本质就是占位符赋值 3. 多种情况的获取情况 单参数情况&#xff1a; a. 单参数-单个字面量类型 …
阅读更多...
人脸清晰修复神器CodeFormer

人脸清晰修复神器CodeFormer

随着AI技术在图像处理领域大展身手&#xff0c;AI去马赛克相关的项目也屡见不鲜&#xff0c;比如在Github上开源免费、备受欢迎的 CodeFormer 。不得不说利用这款神奇的人脸修复工具&#xff0c;真的是让我大开眼界&#xff0c;竟然可以这样搞&#xff01; 不管面对的是多么模…
阅读更多...
Java知识总结-基础

Java知识总结-基础

Java中的访问权限修饰符 Java语言有四个权限访问修饰符&#xff0c;权限从大到小依次为&#xff1a; 1&#xff09;public &#xff1a;公共权限&#xff0c;可以被任意类访问&#xff0c;不同包不同类依然可以访问&#xff0c; 可修饰&#xff1a;类、成员变量、方法&#…
阅读更多...
大模型+多模态实现

大模型+多模态实现

那么如何在预训练LLM的基础上引入跨模态的信息&#xff08;包括图像、语音、视频模态&#xff09;&#xff0c;让其变得更强大、更通用呢&#xff1f;本节将介绍“大模型多模态”的3种实现方法。 以LLM为核心&#xff0c;调用其他多模态组件 微软亚洲研究院&#xff08;MSRA&…
阅读更多...
STM32中SPI通信的完整C语言代码范例

STM32中SPI通信的完整C语言代码范例

SPI (Serial Peripheral Interface) 是一种同步串行通信协议&#xff0c;广泛应用于嵌入式系统中&#xff0c;用于与外设进行数据交换。STM32系列微控制器提供了丰富的SPI外设&#xff0c;支持多种工作模式和配置选项。本文将以STM32F103系列为例&#xff0c;详细介绍SPI通信的…
阅读更多...
Java基础（运算符）

Java基础（运算符）

运算符 运算符和表达式 运算符&#xff1a;对字面量或者变量进行操作的符号 表达式&#xff1a;用运算符把字面量或者变量连接起来&#xff0c;符合java语法的式子就可以称为表达式&#xff1b;不同运算符连接的表达式体现的是不同类型的表达式。 算术运算符&#xff08;加…
阅读更多...
Linux基础命令[24]-su

Linux基础命令[24]-su

文章目录 1. su 命令说明2. su 命令语法3. su 命令示例3.1 不加参数3.2 -&#xff08;登录&#xff09;3.3 -c&#xff08;执行命令&#xff09; 4. 总结 1. su 命令说明 su&#xff1a;以用户身份执行命令&#xff0c;基本信息如下&#xff1a; Usage:su [options] [-] [USE…
阅读更多...
一些RabbitMQ面试题

一些RabbitMQ面试题

RabbitMQ是什么&#xff0c;它的主要用途是什么 RabbitMQ是一个开源的消息代理软件&#xff0c; 它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c; 主要用于在分布式系统之间进行可靠的异步通信。 它的主要用途包括解耦系统组件、提高系统可扩展性、实现消息…
阅读更多...
数据结构四：线性表之带头结点的单向循环循环链表的设计

数据结构四：线性表之带头结点的单向循环循环链表的设计

前面两篇介绍了线性表的顺序和链式存储结构&#xff0c;其中链式存储结构为单向链表&#xff08;即一个方向的有限长度、不循环的链表&#xff09;&#xff0c;对于单链表&#xff0c;由于每个节点只存储了向后的结点的地址&#xff0c;到了尾巴结点就停止了向后链的操作。也就…
阅读更多...
架构师系列-消息中间件（九）- RocketMQ 进阶（三）-消费端消息保障

架构师系列-消息中间件（九）- RocketMQ 进阶（三）-消费端消息保障

5.2 消费端保障 5.2.1 注意幂等性 应用程序在使用RocketMQ进行消息消费时必须支持幂等消费&#xff0c;即同一个消息被消费多次和消费一次的结果一样&#xff0c;这一点在使用RoketMQ或者分析RocketMQ源代码之前再怎么强调也不为过。 “至少一次送达”的消息交付策略&#xff…
阅读更多...
Hive主要介绍

Hive主要介绍

Hive介绍 hive是基于 Hadoop平台操作 HDFS 文件的插件工具 可以将结构化的数据文件映射为一张数据库表 可以将 HQL 语句转换为 MapReduce 程序 1.hive 是由驱动器组成&#xff0c;驱动器主要由4个组件组成&#xff08;解析器、编译器、优化器、执行器&#xff09; 2.hive本身不…
阅读更多...
什么是Java中的代理模式？

什么是Java中的代理模式？

Java中的代理模式&#xff08;Proxy Pattern&#xff09;是一种设计模式&#xff0c;用于在不改变原始对象&#xff08;也称为主题&#xff0c;Subject&#xff09;的代码的情况下&#xff0c;为原始对象提供代理对象&#xff0c;以控制对原始对象的访问。代理模式可以在不改变…
阅读更多...
最新文章

Copyright @ 2022~2023