Vue3 vs Vue2Vue 2 与 Vue 3 的主要区别 1. 反应性系统 Vue 2: 使用 Object.de

Vue 2 与 Vue 3 的主要区别

1. 反应性系统

Vue 2:

使用 Object.defineProperty。
对于数组，需要特定的方法（例如 push, pop）来维护反应性。
不支持 Map, Set, WeakMap, WeakSet 的反应性。

Vue 3:

使用 Proxy 和 Reflect。
支持对数组的直接索引更改和 .length 属性的变化。
增加了对 Map, Set, WeakMap, WeakSet 的反应性支持。

2. 组合 API

Vue 2:

主要依赖 Options API，如 data, methods, computed, watch 等。
逻辑复用和组件间的逻辑共享主要依赖 mixins。

Vue 3:

引入了 Composition API (setup, ref, reactive, computed, watch, 等)。
更简洁和直观地组合和复用功能。
setup 函数为组件提供了一个新的组织逻辑的方式。

3. 组件

Vue 2:

functional 无状态组件不支持实例，没有 this 上下文。

Vue 3:

所有组件默认都是功能性的。
vue-function-api 插件可用于 Vue 2，以提供类似于 Vue 3 的功能。

4. 多个模板和片段

Vue 2:

每个 Vue 组件只能有一个根元素。

Vue 3:

Vue 组件可以有多个根元素。
不再需要额外的 div 或其他元素包裹。

5. 性能

Vue 2:

为了检测更改，需要递归遍历组件树。

Vue 3:

基于静态树提升和动态部分的打补丁，性能大大提高。
更小的打包尺寸，特别是通过 tree-shaking。

6. TypeScript 支持

Vue 2:

有限的 TypeScript 支持。

Vue 3:

从头开始使用 TypeScript 重写。
提供了更好的 TypeScript 类型定义。

7. 自定义渲染器 API

Vue 2:

更难以创建自定义渲染器。

Vue 3:

引入了更易于使用的渲染器 API，方便创建自定义渲染器。

8. 其他新特性

Vue 3:

新的全局 API：createApp 替代了 Vue 的构造函数。
provide 和 inject 更强大且灵活。
新的 <teleport> 特性。
更好的错误处理机制。

9. 举例说明

Vue 2

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录逻辑
    },
    register() {
      // 注册逻辑
    }
  }
};
</script>

Vue 3

使用 Options API:

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录逻辑
    },
    register() {
      // 注册逻辑
    }
  }
};
</script>

使用 Composition API:

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');

    const login = () => {
      // 登录逻辑
    };

    const register = () => {
      // 注册逻辑
    };

    return {
      username,
      password,
      login,
      register
    };
  }
};
</script>

区别：

Reactivity System：Vue 3 使用了 Proxy API 作为其反应性系统的基础，而 Vue 2 使用了 Object.defineProperty。
Composition API：Vue 3 引入了 Composition API，它是一个新的、更加声明性的方式来组织组件逻辑。上面的示例展示了如何使用 setup 函数和 ref 方法来替代 Vue 2 中的 data 和 methods。
Performance：Vue 3 在虚拟 DOM 和其他方面有所优化，从而提高了性能。

需要注意的是，Vue 3 仍然支持 Vue 2 的 Options API，因此你可以按照 Vue 2 的方式编写代码。但为了利用 Vue 3 的新特性和改进，许多开发者选择使用 Composition API。