Vue2 和 Vue3 的区别

162 阅读3分钟
  1. 性能提升

    • 打包体积更小:Vue 3 的组件 API 是按需引用的,未使用的 API 不会被加载,从而减少了打包体积,优化了加载性能。
    • 虚拟 DOM 的重写:Vue 3 对虚拟 DOM 进行了重写,提升了页面的渲染性能;

    代码示例

    // Vue 3 中的按需引用
    import { ref, reactive } from 'vue';
    
    const count = ref(0);
    const state = reactive({ message: 'Hello, Vue 3!' });
    
  2. 新的生命周期钩子

    • Vue 3 引入了 setup 函数,取代了 Vue 2 中的 beforeCreatecreated 钩子函数。此外,Vue 3 将 mountedupdateddestroyed 钩子函数分别替换为 onMountedonUpdatedonUnmounted

1724808015538.jpg

  1. 组合式 API(Composition API)

    • Vue 3 通过 setup 函数作为入口,让开发者可以在一个地方集中管理所有逻辑,方便快速定位到某个功能用到的所有 API,提升了代码管理的便利性。
    • Vue 2:主要使用选项式 API 组织组件逻辑,如 datamethodscomputedwatch 等。这种组织方式在处理有大量代码的组件时,代码容易分散,不易维护。

    代码示例

    // Vue 2 选项式 API
    export default {
      data() {
        return { count: 0 };
      },
      methods: {
        increment() {
          this.count++;
        },
      },
      computed: {
        doubleCount() {
          return this.count * 2;
        },
      },
    };
    
    // Vue 3 组合式 API
    import { ref, computed } from 'vue';
    
    export default {
      setup() {
        const count = ref(0);
        const doubleCount = computed(() => count.value * 2);
    
        function increment() {
          count.value++;
        }
    
        return { count, doubleCount, increment };
      }
    };
    
  2. 响应式 API 的改进

    • Vue 3 的响应式系统:Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty 实现响应式数据。这种改进使 Vue 3 能够监听整个对象的变化,包括属性的添加和删除和数组通过索引修改元素。
    • Vue 2 的缺点:在 Vue 2 中,响应式数据使用 Object.defineProperty 监听对象现有属性的变化,并通过重写数组的原型方法(push,pop) 来实现响应式,无法检测到对象属性的增加和删除和通过索引直接修数组元素,需通过 $set 方法来手动触发视图更新。
特性Vue 2(Object.definePropertyVue 3(Proxy
对对象的处理不能检测新增/删除属性,需使用 Vue.set能自动检测属性的新增/删除
对数组的处理无法通过索引修改数组,需使用 Vue.set直接监控数组所有操作,包括索引修改
性能遍历所有属性,递归创建 getter/setter更高效,代理整个对象
灵活性只能拦截已存在的属性可以拦截任何操作(读写、删除等)
**代码示例**:

```javascript
// Vue 2 响应式数据
const state = {
  message: 'Hello, Vue 2!',
};
// 新增属性方法1 
this.$set(state, 'newProp', 'New Property'); // 手动触发
// 新增属性方法2
this.myObject = Object.assign({}, this.myObject, { job: 'Developer' });
 // 直接通过索引修改,无法触发视图更新
 arr[0] = 'new value';  // 不会触发更新
 // 使用 Vue.set 来修改,能够触发视图更新
 this.$set(arr, 0, 'new value');
// 删除属性对象
this.$delete(this.myObject, 'propertyToDelete'); 
 // 删除属性数组 
this.$delete(this.myArray, index);

// Vue 3 响应式数据
const state = reactive({
  message: 'Hello, Vue 3!',
});
state.newProp = 'New Property'; // 自动触发
```

5. TypeScript 支持

  • Vue 3 的代码库使用 TypeScript 重写,可以使用 TS 定义数据类型,在实际开发中方便进行数据类型检测,提前发现错误,从而提升代码质量。
ts
复制代码
import { defineComponent, ref } from 'vue';

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

6. 全局 API 变更

  • 在 Vue 2 中,全局 API 是直接挂载在 Vue 构造函数上的,可以通过 Vue 构造函数直接调用全局 API。Vue 3 引入了 createApp 方法用于创建实例 app,然后通过这个 app 实例调用全局 API,这种方式避免了不同实例之间的冲突。
js
复制代码
// Vue 2 中的全局组件注册
Vue.component('my-component', {
  // 组件选项
});

// Vue 3 中的全局组件注册
const app = createApp(App);
app.component('my-component', { 
  // 组件选项
});

// Vue 2 中的全局指令注册
Vue.directive('my-directive', {
  // 指令选项
});

// Vue 3 中的全局指令注册
app.directive('my-directive', { 
  // 指令选项 
});