【经典面试题】Vue3和Vue2有什么区别？

在这篇博客中，我们将深入探讨 Vue 2 和 Vue 3 之间的主要差异，并通过示例代码来展示这些差异。

1. 架构变化

Vue 3 引入了一种新的内部架构，使用 Proxy 替代了 Vue 2 中的 Object.defineProperty。这个变化带来了性能的提升和更好的内存管理。

Vue 2 的响应式系统

// Vue 2 响应式系统示例
var vm = new Vue({data: {message: 'Hello'}
});
vm.message = 'Goodbye';
// Vue 会自动检测数据变化，并更新 DOM

Vue 3 的响应式系统

// Vue 3 使用 Proxy 的响应式系统示例
const { reactive } = Vue;const state = reactive({message: 'Hello'
});state.message = 'Goodbye';
// 数据变化后，Vue 会自动更新 DOM

2. 组合式 API

Vue 3 引入了组合式 API，这是一种全新的编写组件逻辑的方式，允许更灵活的代码组织和复用。

Vue 2 的选项式 API

// Vue 2 中使用选项式 API
new Vue({data() {return {count: 0}},methods: {increment() {this.count++;}}
});

Vue 3 的组合式 API

// Vue 3 中使用组合式 API
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log('Component is mounted!');});return { count, increment };}
};

3. 性能提升

Vue 3 在性能方面做了大量优化，包括编译时优化、更小的体积和更快的虚拟 DOM。

4. 更好的 TypeScript 支持

Vue 3 从一开始就考虑了 TypeScript 的支持，提供了更好的类型推导。

使用 TypeScript 的示例

import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const count = ref<number>(0);const increment = () => {count.value++;};return { count, increment };}
});