探索Vue 2与Vue 3的区别

今天复习一下Vue2与Vue3的区别，巩固一下基础知识点。

1. 核心架构变化

1.1 响应式系统的重写

Vue 2 使用 Object.defineProperty 实现响应式系统，而 Vue 3 改用 Proxy。

Vue 2 的响应式实现

// Vue 2
const data = {
  message: 'Hello, Vue 2!'
};

Object.defineProperty(data, 'message', {
  get() {
    console.log('读取 message');
    return this._message;
  },
  set(value) {
    console.log('更新 message');
    this._message = value;
  }
});

data.message = 'Hello, World!'; // 触发 set
console.log(data.message); // 触发 get

Vue 3 的响应式实现

// Vue 3
const data = new Proxy(
  { message: 'Hello, Vue 3!' },
  {
    get(target, key) {
      console.log(`读取 ${key}`);
      return target[key];
    },
    set(target, key, value) {
      console.log(`更新 ${key}`);
      target[key] = value;
      return true;
    }
  }
);

data.message = 'Hello, World!'; // 触发 set
console.log(data.message); // 触发 get

区别：

• Vue 2：Object.defineProperty 只能监听对象的属性，无法直接监听数组的变化。
• Vue 3：Proxy 可以监听整个对象，包括数组和动态添加的属性，性能更好。

1.2 Composition API

在Vue 3中引入了 Composition API，提供了更灵活的逻辑复用方式。

Vue 2 的 Options API

// Vue 2
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Vue 3 的 Composition API

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

区别：

• Options API：逻辑分散在 data、methods、computed 等选项中，难以复用。
• Composition API：逻辑可以集中在一个函数中，便于复用和测试。

2. 性能优化

2.1 更小的体积

Vue 3 通过 Tree Shaking 和模块化设计，减少了打包体积。

Tree Shaking： 旨在确保在构建过程中只包含实际使用的代码，从而有效减小最终产物的大小。

• Vue 2：完整版约 33KB。
• Vue 3：完整版约 20KB。

2.2 更快的渲染速度

Vue 3 通过优化虚拟 DOM 和编译器，提升了渲染性能。

• 虚拟 DOM 重写：Vue 3 的虚拟 DOM 生成速度更快。
• 编译器优化：Vue 3 的模板编译器生成了更高效的代码。

3. 新特性与改进

3.1 Teleport 组件

Vue 3 新增了 <teleport> 组件，用于将子组件渲染到 DOM 中的任意位置。

<template>
  <teleport to="body">
    <div class="modal">这是一个模态框</div>
  </teleport>
</template>

适用场景：

• 模态框、通知、下拉菜单等需要脱离当前 DOM 结构的组件。

3.2 Fragments

Vue 3 支持多根节点模板，无需包裹一个父元素。

Vue 2

<template>
  <div>
    <h1>标题</h1>
    <p>内容</p>
  </div>
</template>

Vue 3

<template>
  <h1>标题</h1>
  <p>内容</p>
</template>

3.3 更好的 TypeScript 支持

Vue 3 完全使用 TypeScript 重写，提供了更好的类型推断和开发体验。

4. 其他改进

4.1 自定义渲染器

Vue 3 允许开发者自定义渲染器，例如将 Vue 用于构建非 DOM 环境的应用（如 Canvas、WebGL）。

4.2 更好的逻辑复用

通过 Composition API 和自定义 Hook，可以更灵活地复用逻辑。

5. 总结

特性	Vue 2	Vue 3
响应式系统	基于 Object.defineProperty	基于 Proxy
API 设计	Options API	Composition API
性能	较慢	更快
体积	较大	更小
TypeScript 支持	一般	优秀
新特性	无	Teleport、Fragments 等

我的微信公众号： 梨的前端小屋