vue get set 实现

Vue 中实现 getter 和 setter 的方法

在 Vue 中，可以通过计算属性（computed properties）或 Object.defineProperty 实现 getter 和 setter。

使用计算属性实现

计算属性默认只有 getter，但可以通过定义 setter 实现双向绑定。

new Vue({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[1] || ''
      }
    }
  }
})

使用 Object.defineProperty 实现

可以直接在数据对象上定义 getter 和 setter。

new Vue({
  data() {
    const data = {
      _message: 'Hello'
    }
    Object.defineProperty(data, 'message', {
      get() {
        return this._message
      },
      set(newValue) {
        this._message = newValue
        console.log('Message changed to:', newValue)
      }
    })
    return data
  }
})

在 Vue 3 中使用 ref 和 reactive

Vue 3 的 Composition API 提供了更灵活的方式。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed({
      get: () => count.value * 2,
      set: (val) => {
        count.value = val / 2
      }
    })
    return { count, doubleCount }
  }
}

这些方法都能在 Vue 中实现 getter 和 setter 功能，根据具体场景选择合适的方式。