还在开发vue2老项目吗？本文带你梳理vue版本区别

1. Vue2/Vue2.7/Vue3版本区别

先看 vue2.7官方文档说明的新增内容

• 移植回来的特性
  • 组合式 API、setup 语法糖
  • 支持 defineComponent 以改善类型推断 (相较于 Vue.extend)
  • 支持 ref、reactive 等 API
  • 支持 h()、useSlot()、useAttrs()、useCssModules()
  • set()、del() 和 nextTick() 也在 ESM 构建版本中被导出为具名 API，在此之前他们都在 Vue 对象下
  • 在模版表达式中支持了 ESNext 语法，比如可以使用可选链运算符 ?.
  • 支持 emits 选项，但仅以类型检查为目的 (并不会影响运行时的行为)
  • 支持 CSS 的 v-bind 语法
• 没有移植回来的特性
  • ❌ createApp() (Vue 2 不支持相互隔离的应用 scope)
  • ❌ <script setup> 中的顶层 await (Vue 2 不支持异步组件初始化)
  • ❌ 模板表达式中的 TypeScript 语法 (与 Vue 2 parser 不兼容)
  • ❌ 响应性语法糖 (仍处于试验阶段)
  • ❌ 选项式组件不支持 expose (但是在 <script setup> 中支持 defineExpose())

API 区别和 setup 语法糖

vue2.6及以下不支持组合式 API，需要安装 @vue/composition-api 才能使用，比如如下示例

// package.json
"dependencies": {
	"@vue/composition-api": "^1.7.1",
	"vue": "~2.6.14",
	"vue-template-compiler": "2.6.14"
},
"devDependencies": {
	"vite": "~4.2.1",
	"@vitejs/plugin-vue2": "2.3.3", // vue2.7以上使用
	"vite-plugin-vue2": "^2.0.0" // vue2.6及以下使用
}

// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import vue from "@vitejs/plugin-vue2";

// https://vite.dev/config/
export default defineConfig({
	plugins: [
		createVuePlugin(), // vue2.6及以下使用
		// vue(), // vue2.7以上使用
	],
})

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueCompositionAPI, { createApp } from "@vue/composition-api";

/** 原始写法 */
// new Vue({
// render: (h) => h(App),
// }).$mount("#app");

/** composition-api */
Vue.use(VueCompositionAPI);
createApp({
	render: (h) => h(App),
}).mount("#app");

// App.vue
<template>
	<div>
		{{ msg }}
	</div>
</template>

import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
	setup() {
		const msg = ref("123");
		return {
			msg,
		};
	},
});

vue2.7 以上支持组合式 API，和 setup 语法糖，无需另外安装

// package.json
"dependencies": {
	"vue": "^2.7.14",
	"vue-template-compiler": "^2.7.14"
},
"devDependencies": {
	"vite": "~4.2.1",
	"@vitejs/plugin-vue2": "2.3.3", // vue2.7以上使用
	"vite-plugin-vue2": "^2.0.0" // vue2.6及以下使用
}

// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import vue from "@vitejs/plugin-vue2";

// https://vite.dev/config/
export default defineConfig({
	plugins: [
		// createVuePlugin(), // vue2.6及以下使用
		vue(), // vue2.7以上使用
	],
})

// main.js
import Vue from "vue";
import App from "./App.vue";
// import VueCompositionAPI, { createApp } from "@vue/composition-api";

/** 原始写法 */
new Vue({
render: (h) => h(App),
}).$mount("#app");

/** composition-api */
// Vue.use(VueCompositionAPI);
// createApp({
// 	render: (h) => h(App),
// }).mount("#app");

// App.vue
<template>
	<div>
		{{ message }}
	</div>
</template>

<script>
// import { defineComponent, ref } from "@vue/composition-api";
import { defineComponent, ref } from "vue";

export default defineComponent({
	setup() {
		const message = ref("123");
		return {
			message,
		};
	},
});
</script>

vue3 原生支持选项式、组合式 API、setup 语法糖

无需特别配置

其他

1. vue2.7移植了 css 的 v-bind

<script setup>
import { defineComponent, ref } from "vue";

const msg = ref("Vue2.7 Demo");
const color = ref("#000");
</script>

<style scoped>
.test-class {
	background: v-bind(color);
}
</style>

2. Vue3的升级点

1. 重写响应式系统

vue2基于 Object.defineProperty()

vue3基于 Proxy

优势

• 可以监听数组元素的变化
• 可以监听动态新增的属性
• 可以监听删除的属性

2. 优化 Vdom

在 Vue2中,每次更新 diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

patch flag 标记，包括以下标记

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

3. Fragment

vue3 允许我们支持多个根节点

<template>
  <div>12</div>
  <div>23</div>
</template>

4. TypeScript 重写

相比 Vue2，Vue3使用 TS 重写，并且内置的 API、宏都接入了 TS 类型，类型提示友好

5. Composition API

Vue3 全面支持组合式 API 和 setup 语法糖

6. 支持创建多个 Vue 实例

Vue2 创建 vue 实例使用 new Vue 创建，且只有一个实例，vue3支持使用 createApp 创建实例，可以支持多个实例

其他

新增包括

1. Suspense 等待组件
2. Teleport 传送组件
3. 多 v-model
4. 更好的 Tree Shaking