博客站

Vue 3 是 Vue.js 的重大升级版本，相较于 Vue 2，它在性能、开发体验、功能等方面都有显著改进。以下是 Vue 3 和 Vue 2 的主要区别：

1. 性能优化

Vue 3 在性能方面进行了多项优化，显著提升了运行速度和资源利用率。

更快的渲染

• Vue 3 的虚拟 DOM 重写，优化了 Diff 算法，渲染速度更快。
• 引入了 Patch Flag 和 Block Tree 优化，减少不必要的 DOM 操作。

更小的包体积

• Vue 3 的核心库体积比 Vue 2 小了约 40%。
• 通过 Tree Shaking 支持，未使用的代码会被自动移除。

更好的内存使用

• Vue 3 减少了内存占用，特别是在大型应用中表现更佳。

2. Composition API

Vue 3 引入了 Composition API，提供了一种更灵活和强大的方式来组织组件逻辑。

与 Options API 的区别

• Options API：将逻辑分散在 data、methods、computed 等选项中，适合小型项目。
• 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);

    function increment() {
      count.value  ;
    }

    return {
      count,
      increment,
    };
  },
};

3. 响应式系统重写

Vue 3 使用 Proxy 重写了响应式系统，替代了 Vue 2 中的 Object.defineProperty。

Proxy 的优势

• 更强的拦截能力：Proxy 可以拦截对象的增删改查等操作。
• 更好的数组支持：Vue 3 直接支持数组的变异方法（如 push、pop 等）。
• 动态添加属性：Vue 3 支持动态添加响应式属性，而 Vue 2 需要 Vue.set。

示例

// Vue 2
export default {
  data() {
    return {
      user: { name: 'Alice' },
    };
  },
  methods: {
    addAge() {
      this.$set(this.user, 'age', 25); // 需要 Vue.set
    },
  },
};

// Vue 3
import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({ name: 'Alice' });

    function addAge() {
      user.age = 25; // 直接添加属性
    }

    return {
      user,
      addAge,
    };
  },
};

4. TypeScript 支持

Vue 3 从底层开始使用 TypeScript 重写，提供了更好的 TypeScript 支持。

类型推断

• Vue 3 的 Composition API 和 Options API 都提供了更好的类型推断。
• 在模板中使用 TypeScript 时，Vue 3 能够自动推断出组件的 props、data、methods 等的类型。

示例

// Vue 3 (TypeScript)
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);

    function increment() {
      count.value  ;
    }

    return {
      count,
      increment,
    };
  },
});

5. 新特性

Vue 3 引入了许多新特性，进一步提升了开发体验和功能。

Teleport

• 将组件的一部分内容“传送”到 DOM 中的其他位置，适合模态框、弹出框等场景。

<template>
  <teleport to="body">
    <div v-if="showModal" class="modal">
      <p>This is a modal!</p>
    </div>
  </teleport>
</template>

Suspense

• 在异步组件加载时显示一个后备内容，提升用户体验。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Fragment

• 组件可以有多个根节点，而不需要包裹在一个单独的父元素中。

<template>
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</template>

6. 其他改进

• 自定义渲染器 API：Vue 3 提供了自定义渲染器 API，允许开发者创建自定义的渲染器（如 WebGL、Canvas 等）。
• 全局 API 修改：Vue 3 的全局 API 改为使用 createApp 创建应用实例，避免全局配置污染。
• 生命周期钩子重命名：部分生命周期钩子进行了重命名（如 beforeDestroy 改为 beforeUnmount）。

7. 总结

Vue 3 相较于 Vue 2 的主要区别包括：

1. 性能优化：更快的渲染、更小的包体积、更好的内存使用。
2. Composition API：提供更灵活和强大的逻辑组织方式。
3. 响应式系统重写：使用 Proxy 替代 Object.defineProperty，支持动态添加属性和更好的数组支持。
4. TypeScript 支持：从底层开始使用 TypeScript，提供更好的类型推断。
5. 新特性：引入 Teleport、Suspense、Fragment 等新特性。
6. 其他改进：自定义渲染器 API、全局 API 修改、生命周期钩子重命名。

Vue 3 的这些改进使得它在性能、开发体验、功能等方面都优于 Vue 2，特别适合大型项目和复杂应用。