vue computed中使用set和get修改数据

computed是计算出来的属性, 相当于计算结果, 所以我们不能直接对结果进行修改!

getter函数

负责使用data中的数据, 但是注意 只能用, 不能改! 使用完后 记得将结果return

data() {
    return {
        options: [{a: 1}]
    }
}
computed {
	// 写法一: 函数形式的简写:
	objArr() { return this.options;}
    
    // 写法二: 完整写法:
    objArr: {
        get() {
            return this.options;
        }
    }
}

setter函数

有一个参数 newValue, 负责接收传进来的值, 可以使用这个newValue给data中的数据进行操作:

set(newValue) {
	// 可以在这里面对data数据进行操作, 这样get拿到的结果也会随data的值变化而变化
	this.data.options = newValue, // 用newValue替换原来的options
}

现在有个需求: 想给options里添加新的数据, 如何操作?

// 1. 需要用到set函数:
computed {
    objArr: {
        get() { return this.options;},
        set(newValue) {
            console.log('newValue', newValue)
            this.options.push(newValue);
        }
    }
}

// 2. 触发set函数 即给objArr赋值:
// 这里我们封装个方法:
methods: {
    setObjArr() {
        this.objArr = {b: 2}
    }
}
// 通过按钮点击触发
<button @click="setObjArr">set</button>

值得注意的是: 这里的this.objArr = { b: 2 }并不是把{b: 2} 赋值给objArr的意思, 而是传参给里面的set函数。
触发setObjArr事件, 会发现 计算属性 objArr 已经改变了, 其本质是因为data中的options发生了改变。