vue get set 实现

Vue 中实现 Getter/Setter 的两种方式

1. 使用 computed 属性

Vue 的 computed 属性天然支持 getter/setter 逻辑：

data() {
  return {
    privateValue: ''
  }
},
computed: {
  value: {
    get() {
      return this.privateValue
    },
    set(newVal) {
      this.privateValue = newVal.toUpperCase() // 示例：自动转大写
    }
  }
}

2. 使用 Object.defineProperty

适用于需要更底层控制的场景：

created() {
  const vm = this
  Object.defineProperty(vm, 'dynamicProp', {
    get() {
      return vm.internalValue * 2
    },
    set(value) {
      vm.internalValue = value / 2
    }
  })
}

3. 在 Vue 3 中使用 ref 或 reactive

Vue 3 的组合式 API 提供更灵活的方式：

import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed({
  get: () => count.value * 2,
  set: (val) => { count.value = val / 2 }
})

注意事项

• 避免在 setter 中直接修改依赖的属性，会导致无限循环
• 对于复杂对象，考虑使用深度监听或 Vuex/Pinia 管理状态
• 在组件间传递时，需要配合 v-model 或 .sync 修饰符使用