vue get set 实现
Vue 中使用 get/set 实现响应式数据
在 Vue 中，可以通过计算属性（computed）或直接使用 Object.defineProperty 实现 getter/setter，以下是两种常见方法：
计算属性实现 get/set
export default {
data() {
return {
internalValue: ''
}
},
computed: {
value: {
get() {
return this.internalValue
},
set(newValue) {
this.internalValue = newValue
console.log('值被修改为:', newValue)
}
}
}
}使用 Object.defineProperty
export default {
data() {
const obj = {}
Object.defineProperty(obj, 'value', {
get() {
return this._value
},
set(newValue) {
this._value = newValue
console.log('值被修改为:', newValue)
}
})
return {
obj
}
}
}Vue 3 的 ref 和 reactive
Vue 3 的 Composition API 中，ref 和 reactive 自动提供 getter/setter：
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // get
count.value = 1 // set自定义响应式对象
通过 reactive 创建的对象会自动转换属性为 getter/setter：
import { reactive } from 'vue'
const state = reactive({
count: 0
})
console.log(state.count) // get
state.count++ // set注意事项：
- 计算属性的 setter 需要依赖一个 data 属性存储实际值
- Vue 3 的
ref在模板中自动解包，无需.value - 直接修改数组或对象属性时，确保使用响应式方法（如
push而非直接赋值）
