-
性能提升
- 打包体积更小:Vue 3 的组件 API 是按需引用的,未使用的 API 不会被加载,从而减少了打包体积,优化了加载性能。
- 虚拟 DOM 的重写:Vue 3 对虚拟 DOM 进行了重写,提升了页面的渲染性能;
代码示例:
// Vue 3 中的按需引用 import { ref, reactive } from 'vue'; const count = ref(0); const state = reactive({ message: 'Hello, Vue 3!' });
-
新的生命周期钩子
- Vue 3 引入了
setup
函数,取代了 Vue 2 中的beforeCreate
和created
钩子函数。此外,Vue 3 将mounted
、updated
、destroyed
钩子函数分别替换为onMounted
、onUpdated
、onUnmounted
。
- Vue 3 引入了
-
组合式 API(Composition API)
- Vue 3 通过
setup
函数作为入口,让开发者可以在一个地方集中管理所有逻辑,方便快速定位到某个功能用到的所有 API,提升了代码管理的便利性。 - Vue 2:主要使用选项式 API 组织组件逻辑,如
data
、methods
、computed
、watch
等。这种组织方式在处理有大量代码的组件时,代码容易分散,不易维护。
代码示例:
// Vue 2 选项式 API export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; }, }, computed: { doubleCount() { return this.count * 2; }, }, }; // Vue 3 组合式 API import { ref, computed } from 'vue'; export default { setup() { const count = ref(0); const doubleCount = computed(() => count.value * 2); function increment() { count.value++; } return { count, doubleCount, increment }; } };
- Vue 3 通过
-
响应式 API 的改进
- Vue 3 的响应式系统:Vue 3 使用
Proxy
替代 Vue 2 中的Object.defineProperty
实现响应式数据。这种改进使 Vue 3 能够监听整个对象的变化,包括属性的添加和删除和数组通过索引修改元素。 - Vue 2 的缺点:在 Vue 2 中,响应式数据使用 Object.defineProperty 监听对象现有属性的变化,并通过重写数组的原型方法(push,pop) 来实现响应式,无法检测到对象属性的增加和删除和通过索引直接修数组元素,需通过 $set 方法来手动触发视图更新。
- Vue 3 的响应式系统:Vue 3 使用
特性 | Vue 2(Object.defineProperty ) | Vue 3(Proxy ) |
---|---|---|
对对象的处理 | 不能检测新增/删除属性,需使用 Vue.set | 能自动检测属性的新增/删除 |
对数组的处理 | 无法通过索引修改数组,需使用 Vue.set | 直接监控数组所有操作,包括索引修改 |
性能 | 遍历所有属性,递归创建 getter/setter | 更高效,代理整个对象 |
灵活性 | 只能拦截已存在的属性 | 可以拦截任何操作(读写、删除等) |
**代码示例**:
```javascript
// Vue 2 响应式数据
const state = {
message: 'Hello, Vue 2!',
};
// 新增属性方法1
this.$set(state, 'newProp', 'New Property'); // 手动触发
// 新增属性方法2
this.myObject = Object.assign({}, this.myObject, { job: 'Developer' });
// 直接通过索引修改,无法触发视图更新
arr[0] = 'new value'; // 不会触发更新
// 使用 Vue.set 来修改,能够触发视图更新
this.$set(arr, 0, 'new value');
// 删除属性对象
this.$delete(this.myObject, 'propertyToDelete');
// 删除属性数组
this.$delete(this.myArray, index);
// Vue 3 响应式数据
const state = reactive({
message: 'Hello, Vue 3!',
});
state.newProp = 'New Property'; // 自动触发
```
5. TypeScript 支持
- Vue 3 的代码库使用 TypeScript 重写,可以使用 TS 定义数据类型,在实际开发中方便进行数据类型检测,提前发现错误,从而提升代码质量。
ts
复制代码
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref<number>(0);
return { count };
},
});
6. 全局 API 变更
- 在 Vue 2 中,全局 API 是直接挂载在 Vue 构造函数上的,可以通过 Vue 构造函数直接调用全局 API。Vue 3 引入了
createApp
方法用于创建实例app
,然后通过这个app
实例调用全局 API,这种方式避免了不同实例之间的冲突。
js
复制代码
// Vue 2 中的全局组件注册
Vue.component('my-component', {
// 组件选项
});
// Vue 3 中的全局组件注册
const app = createApp(App);
app.component('my-component', {
// 组件选项
});
// Vue 2 中的全局指令注册
Vue.directive('my-directive', {
// 指令选项
});
// Vue 3 中的全局指令注册
app.directive('my-directive', {
// 指令选项
});