文章目录
- 1. 响应式系统
- 2. 组合式 API (Composition API)
- 3. Fragment (碎片)
- 4. Teleport (传送门)
- 5. 性能改进
- 6. 移除或改变的功能
- 7. 构建工具
- 8. TypeScript 支持
Vue 2 和 Vue 3 之间存在许多重要的区别，这些区别涵盖了性能、API 设计、组合式 API（Composition API）、响应式系统以及构建工具等方面。以下是一些关键的区别，并附带代码示例来加以说明。
1. 响应式系统
Vue 2 使用 Object.defineProperty 来进行数据劫持，它只能对对象的属性进行劫持，对于新增的属性或者数组的下标变更则无法监听。
Vue 2 示例：
// Vue 2 响应式数据
data() {
return {
message: 'Hello Vue 2!'
};
}
Vue 3 使用 Proxy 来实现响应式系统，它可以对对象进行更深层次的监听，包括新增属性和数组变更。
Vue 3 示例：
// Vue 3 响应式数据
import { ref } from 'vue';
setup() {
const message = ref('Hello Vue 3!');
// 可以通过message.value进行访问和修改
return {
message
};
}
2. 组合式 API (Composition API)
Vue 3 引入了 Composition API，允许我们更加灵活地组织组件逻辑。
Vue 2 示例 (Options API):
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
Vue 3 示例 (Composition API):
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
3. Fragment (碎片)
Vue 3 支持组件有多个根节点。
Vue 2 示例 (需要根节点):
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
Vue 3 示例 (可以没有根节点):
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
4. Teleport (传送门)
Vue 3 允许我们将模板的一部分“传送”到 DOM 树中的任何位置。
Vue 3 Teleport 示例:
<template>
<teleport to="body">
<div id="modal">...</div>
</teleport>
</template>
在这个例子中，<div id="modal"> 将被渲染到 <body> 的子节点中，而不是它原来的组件模板位置。
5. 性能改进
Vue 3 在很多方面进行了性能优化，比如编译优化、更快的组件初始化、更快的更新渲染等。由于这些优化是内部的，所以不会直接体现在代码上。
6. 移除或改变的功能
$on,$off,$once实例方法已被移除。filter过滤器已被移除。v-model在自定义组件上的行为有所改变，现在它默认使用modelValue作为 prop 和update:modelValue作为事件。- 异步组件的 API 有所改变。
7. 构建工具
Vue 3 官方推荐使用 Vite 作为构建工具，它比 Vue 2 中常用的 Webpack 构建速度更快。但你也可以在 Vue 3 中继续使用 Webpack。
8. TypeScript 支持
Vue 3 对 TypeScript 的支持更加完善，使得在 Vue 3 中使用 TypeScript 编写代码更加容易和可靠。
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
