Vue 2 和 Vue 3的比较（二、语法差异）

最新推荐文章于 2025-08-19 14:08:19 发布

原创最新推荐文章于 2025-08-19 14:08:19 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端技术专栏收录该内容

21 篇文章

订阅专栏

以下是 Vue 2 和 Vue 3 主要语法差异的逐项对比：

1. 核心架构

Vue 2：基于 选项式 API（data、methods、computed 等选项组织代码）。

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

Vue 3：新增 组合式 API（setup() 函数 + ref/reactive）。

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

2. 响应式系统

Vue 2：通过 Object.defineProperty 实现，需手动处理动态属性。
```
this.$set(this.obj, 'newKey', 'value'); // 手动触发响应
```
Vue 3：基于 Proxy，支持动态属性和数组索引监听，无需手动操作。
```
obj.newKey = 'value'; // 自动响应
```

3. 生命周期钩子

Vue 2：直接在选项中声明（如 mounted）。

export default {
  mounted() { console.log('Mounted'); }
};

Vue 3：通过 onMounted 等函数调用，且需在 setup() 中使用。

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => { console.log('Mounted'); });
  }
};

4. 模板语法

Vue 2：v-model 默认绑定 value 和 input 事件。
```
<input v-model="text">
```
Vue 3：默认绑定 modelValue 和 update:modelValue，支持自定义修饰符（如 .trim）。
```
<input v-model="text">
<input v-model:trim="text"> 
```

5. 组件与 Props

Vue 2：props 在 data 之后声明。

export default {
  data() { return { count: 0 }; },
  props: ['msg']
};

Vue 3：props 需在 setup() 之前声明，且直接通过参数传递。

export default {
  props: ['msg'],
  setup(props) { /* 直接使用 props.msg */ }
};

6. Fragment 支持

Vue 2：组件必须单根节点。

<!-- 错误：多根节点 -->
<div>{{ title }}</div>
<div>{{ content }}</div>

Vue 3：支持多根节点（Fragment）。

<div>{{ title }}</div>
<div>{{ content }}</div>

7. Teleport 组件

Vue 2：无此功能。

Vue 3：新增 <teleport>，将内容渲染到指定 DOM 位置。

<teleport to="body">
  <div class="modal">弹窗内容</div>
</teleport>

8. 其他关键变化

Vue 2：过滤器（Filters）和 $children。

// 过滤器（已废弃）
{{ text | capitalize }}

Vue 3：移除过滤器，推荐使用方法或计算属性；$children 改用 refs。
```
// 方法替代过滤器
methods: { capitalize(text) { /* ... */ } }
```

9. 全局 API

Vue 2：通过 new Vue() 创建实例。
```
new Vue({ el: '#app' });
```
Vue 3：改用 createApp()。
```
createApp(App).mount('#app');
```

总结

核心差异：组合式 API、Proxy 响应式、多根组件、Teleport。
迁移建议：使用官方工具 @vue/compat 逐步迁移，优先适配组合式 API。
学习资源：Vue 3 官方文档。