1. Composition API vs Options API
Vue 2 (Options API)
在 Vue 2 中,组件的逻辑通常是通过 data、methods、computed 等选项来定义的。
// Vue 2 组件
export default {
data() {
return {
count: 0
}
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
increment() {
this.count++;
}
}
}
Vue 3 (Composition API)
在 Vue 3 中,可以使用 Composition API,将相关的逻辑组合在一起,使代码更易于复用和维护。
// Vue 3 组件
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => {
count.value++;
};
return {
count,
doubleCount,
increment
};
}
}
2. 响应性系统
Vue 2
Vue 2 的响应性系统基于 Object.defineProperty,这意味着不能检测到对象属性的添加和删除。
// Vue 2 响应性
var vm = new Vue({
data: {
message: 'Hello'
}
});
vm.message = 'Hello Vue!'; // 响应式
vm.newProperty = 'New'; // 非响应式
Vue 3
Vue 3 使用 Proxy 实现响应性系统,能够检测到对象属性的添加和删除。
// Vue 3 响应性
import { reactive } from 'vue';
const state = reactive({
message: 'Hello'
});
state.message = 'Hello Vue!'; // 响应式
state.newProperty = 'New'; // 也是响应式
3. TypeScript 支持
Vue 2
在 Vue 2 中使用 TypeScript 通常需要额外的配置和类型声明。
// Vue 2 中使用 TypeScript
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class MyComponent extends Vue {
message: string = 'Hello';
get doubleMessage(): string {
return this.message + this.message;
}
increment() {
this.message += '!';
}
}
Vue 3
Vue 3 对 TypeScript 支持更好,类型推导更加完善。
// Vue 3 中使用 TypeScript
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello');
const doubleMessage = computed(() => message.value + message.value);
const increment = () => {
message.value += '!';
};
return {
message,
doubleMessage,
increment
};
}
});
4. 多根节点 (Fragments)
Vue 2
Vue 2 中每个组件必须有一个根节点。
<template>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
</template>
Vue 3
Vue 3 允许组件返回多个根节点。
<template>
<p>First paragraph</p>
<p>Second paragraph</p>
</template>
5. Teleport
Vue 3
Vue 3 引入了 Teleport 组件,允许开发者将某个组件的 DOM 树渲染到当前组件树之外的任意位置。
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<Teleport to="body">
<div v-if="showModal" class="modal">
<p>This is a modal</p>
<button @click="showModal = false">Close Modal</button>
</div>
</Teleport>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const showModal = ref(false);
return { showModal };
}
}
</script>
通过这些代码实例,您可以更清晰地看到 Vue 2 和 Vue 3 之间的一些主要区别和改进。