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 官方文档。