Vue 2 和 Vue 3的比较（二、语法差异）
以下是 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 官方文档。