Vue3 和 Vue2 的一些区别-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1379 天，文章内容可能已经过时。

1.更加轻量和快
2. 组合式API（Composition API）
3、更好的 TypeScript 支持
4. 新的生命周期钩子
5. 新的编译器和优化
6.Vue3没有构造函数Vue
7.this指向不同
8.可以有多个根节点

1.更加轻量和快

Vue3 比 Vue2 更加轻量，运行速度也更快。这是因为 Vue3 使用了一个全新的编译器和虚拟DOM实现，优化了性能和内存使用。例如，Vue3 的响应式系统基于 Proxy 对象，这让数据追踪更加高效。而 Vue2 使用的是 Object.defineProperty，这在处理复杂数据结构时可能会变得非常缓慢。

2. 组合式API（Composition API）

Vue3 引入了组合式 API，通过这个 API，我们可以更好地组织和复用代码。在 Vue2 中，我们使用选项式 API，组件的逻辑可能会分散在生命周期钩子、methods、computed 等多个地方。而现在，通过组合式 API，可以将相关逻辑集中在一起，代码更清晰、可维护性更高。

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

// Vue3
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3、更好的 TypeScript 支持

Vue3 从设计之初就考虑了对 TypeScript 的支持。现在，使用 TypeScript 编写 Vue 组件变得更加自然和方便。Vue2 虽然也支持 TypeScript，但需要一些额外的配置和插件，使用起来不如 Vue3 顺手。

4. 新的生命周期钩子

Vue3 对生命周期钩子进行了重命名，使其更加直观和符合用户的认知。比如 beforeCreate 和 created 被 setup 替代，beforeDestroy 和 destroyed 被 beforeUnmount 和 unmounted 替代。

// Vue2
export default {
  beforeCreate() {
    console.log('Component is being created');
  },
  destroyed() {
    console.log('Component is destroyed');
  }
};

// Vue3
export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });
    onUnmounted(() => {
      console.log('Component is unmounted');
    });
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5. 新的编译器和优化

Vue3 引入了一个全新的编译器，支持基于模块的Tree-Shaking。这意味着在构建应用时，只会包含实际使用到的代码，减少了打包后的文件大小。此外，Vue3 对静态模板的编译和优化也做了大量改进，使得渲染性能更好。

6.Vue3没有构造函数Vue

在 Vue2 中，通常使用 Vue 构造函数来创建一个新的 Vue 实例。然而在 Vue3 中，这个构造函数已经被移除，取而代之的是 createApp 方法。这使得 API 更加简洁，同时也为未来的改进和优化提供了更多空间。

// vue2
const app = new Vue();
app.$mount("#app");

// vue3
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

1
2
3
4
5
6
7
8
9

7.this指向不同

在 Vue3 的组合式 API 中，this 不再指向组件实例，而是在 setup 中通过返回的对象显式定义。这减少了 this 指向问题导致的 bug，同时也使代码更易于理解和维护。

// Vue2
export default {
  methods: {
    increment() {
      this.count++;
    }
  }
};

// Vue3
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

8.可以有多个根节点

Vue2 中，每个组件模板只能有一个根节点。如果需要多个根节点，必须包裹在一个根元素中。而在 Vue3 中，这个限制被取消了，允许组件返回多个根节点，这让模板编写更加灵活。

<!-- Vue2 -->
<template>
  <div>
    <header>Header</header>
    <main>Main content</main>
  </div>
</template>

<!-- Vue3 -->
<template>
  <header>Header</header>
  <main>Main content</main>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13