【经典面试题】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 };
  }
});

5. 新的生命周期钩子

Vue 3 引入了几个新的生命周期钩子，如 onMounted、onUpdated 和 onUnmounted，使状态管理更加直观。

6. Fragment、Teleport 和 Suspense

Vue 3 提供了几个新的内置组件，使得渲染和组件的组织更为灵活。