对比 Vue2 选项式 API 与 Vue3 setup 语法

对比 Vue2 选项式 API 与 Vue3 setup 语法

1. 代码组织方式
  • Vue2 选项式 API
    通过独立的选项(data, methods, computed, watch, 生命周期钩子等)组织代码。

    export default {
      data() {
        return { count: 0 };
      },
      methods: {
        increment() { this.count++; }
      },
      mounted() { console.log('Component mounted'); }
    }
    

    问题:逻辑分散,一个功能的代码可能分布在多个选项中。

  • Vue3 setup 语法
    使用 Composition API 在 setup 函数内按逻辑组织代码,相关功能集中编写。

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

    优势:逻辑内聚,便于复用(通过自定义 Hook)。


2. 响应式数据
  • Vue2
    使用 data 返回对象,Vue 自动递归处理为响应式。

    data() {
      return { user: { name: 'Alice' } };
    }
    
  • Vue3
    显式使用 ref(基本类型)或 reactive(对象)创建响应式数据。

    const count = ref(0); // 通过 .value 访问
    const user = reactive({ name: 'Alice' }); // 直接访问属性
    

3. 生命周期钩子
  • Vue2
    直接在选项中定义钩子(如 mounted, created)。

    mounted() { console.log('Mounted'); }
    
  • Vue3
    vue 导入钩子函数(如 onMounted),在 setup 中使用。

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

4. 事件与 this
  • Vue2
    通过 this 访问数据/方法,使用 this.$emit 触发事件。

    methods: {
      handleClick() { this.$emit('click'); }
    }
    
  • Vue3
    setupthis,通过 context.emit 触发事件。

    setup(props, { emit }) {
      const handleClick = () => { emit('click'); };
      return { handleClick };
    }
    

5. 计算属性与侦听器
  • Vue2
    使用 computedwatch 选项。

    computed: {
      doubled() { return this.count * 2; }
    },
    watch: {
      count(newVal) { console.log(newVal); }
    }
    
  • Vue3
    使用 computedwatch 函数。

    import { computed, watch } from 'vue';
    setup() {
      const doubled = computed(() => count.value * 2);
      watch(count, (newVal) => { console.log(newVal); });
      return { doubled };
    }
    

setup 语法核心优势

  1. 逻辑复用
    通过自定义 Hook(如 useMouseTracker)封装逻辑,轻松跨组件复用。
  2. 更好的 TypeScript 支持
    类型推断更友好,减少 this 的隐式类型问题。
  3. 更灵活的代码组织
    相关逻辑集中管理,提升复杂组件的可维护性。

常见问题与技巧

  • 响应式丢失:解构 reactive 对象需用 toRefs
    const user = reactive({ name: 'Alice' });
    const { name } = toRefs(user); // 保持响应式
    
  • Ref vs Reactive
    • ref 适用于基本类型,通过 .value 访问。
    • reactive 适用于对象,直接修改属性。

总结

  • 选项式 API:适合简单场景,结构直观但逻辑分散。
  • setup 语法:适合复杂组件,逻辑集中且易于复用,需掌握响应式 API 的使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值