Vue 2 与 Vue 3 的区别与实例详解

vvilkin的学习备忘

于 2025-03-21 12:20:10 发布

阅读量853

点赞数 33

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/vvilkim/article/details/145949748

版权

vue 专栏收录该内容

32 篇文章

订阅专栏

Vue.js 是一款流行的前端框架，以其简单易用和灵活性著称。Vue 3 是 Vue.js 的最新版本，它在 Vue 2 的基础上进行了多项改进和优化。本文将从性能、API、响应式系统、TypeScript 支持等多个方面详细对比 Vue 2 和 Vue 3，并通过实例代码帮助大家更好地理解两者的区别。

1. 性能提升

Vue 3 在性能方面做了大量优化：

更小的体积：Vue 3 通过 Tree-shaking 支持，减少了打包后的体积。
更快的渲染：Vue 3 使用了新的虚拟 DOM 实现，渲染速度更快。
更好的内存使用：Vue 3 优化了内存使用，减少了开销。

2. Composition API vs Options API

Vue 3 引入了 Composition API，这是与 Vue 2 的 Options API 最大的区别之一。

Vue 2 (Options API)

在 Vue 2 中，逻辑分散在 data、methods、computed 等选项中：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 2!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

Vue 3 (Composition API)

Vue 3 的 Composition API 允许将相关逻辑组织在一起，提升代码的可读性和可维护性：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    const reverseMessage = () => {
      message.value = message.value.split('').reverse().join('');
    };

    return {
      message,
      reverseMessage
    };
  }
};
</script>

优点：

逻辑更集中，易于复用。
更适合大型项目。

3. 响应式系统

Vue 3 使用 Proxy 替代了 Vue 2 的 Object.defineProperty，带来了更好的性能和更强大的功能。

Vue 2 (Object.defineProperty)

在 Vue 2 中，直接添加新属性不会触发响应式更新，需要使用 this.$set：

export default {
  data() {
    return {
      user: {
        name: 'Alice'
      }
    };
  },
  created() {
    this.user.age = 25; // 非响应式
    this.$set(this.user, 'age', 25); // 需要使用 $set
  }
};

Vue 3 (Proxy)

Vue 3 的 Proxy 可以直接添加新属性，并自动触发响应式更新：

import { reactive } from 'vue';

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

    user.age = 25; // 响应式

    return {
      user
    };
  }
};

优点：

更直观，无需额外 API。
支持更多操作（如数组索引修改、属性删除等）。

4. TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，代码库使用 TypeScript 重写，提供了更好的类型推断和开发体验。

Vue 2

Vue 2 对 TypeScript 的支持较弱，需要额外配置。

Vue 3

Vue 3 天然支持 TypeScript，开发体验更佳：

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref<string>('Hello Vue 3 with TypeScript!');

    return {
      message
    };
  }
});
</script>

5. Fragment 和 Teleport

Fragment

Vue 3 支持多根节点模板，Vue 2 只允许单根节点。

Vue 2 (单根节点)

<template>
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
</template>

Vue 3 (多根节点)

<template>
  <h1>Title</h1>
  <p>Content</p>
</template>

Teleport

Vue 3 新增了 <teleport> 组件，可以将内容渲染到 DOM 中的任意位置：

<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <p>This is a modal!</p>
        <button @click="showModal = false">Close</button>
      </div>
    </Teleport>
  </div>
</template>

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

export default {
  setup() {
    const showModal = ref(false);

    return {
      showModal
    };
  }
};
</script>

6. 全局 API 变更

Vue 3 将全局 API（如 Vue.component）改为应用实例 API，避免全局污染。

Vue 2 (全局 API)

import Vue from 'vue';
import App from './App.vue';

Vue.component('MyComponent', { /* ... */ });
Vue.directive('my-directive', { /* ... */ });

new Vue({
  render: h => h(App)
}).$mount('#app');

Vue 3 (应用实例 API)

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

const app = createApp(App);

app.component('MyComponent', { /* ... */ });
app.directive('my-directive', { /* ... */ });

app.mount('#app');

7. 其他改进

v-model 改进：Vue 3 支持多个 v-model 绑定。

<template>
  <CustomComponent v-model:title="title" v-model:content="content" />
</template>

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

export default {
  setup() {
    const title = ref('');
    const content = ref('');

    return {
      title,
      content
    };
  }
};
</script>