怎样修改vue中的computed计算属性的值

最新推荐文章于 2024-08-20 10:21:10 发布

转载最新推荐文章于 2024-08-20 10:21:10 发布 · 2.1w 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/small_white_123/article/details/117780579?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECT

文章标签：

#vue

本文讲解了如何在Vue中使用computed的get和set方法来管理计算属性objArr，重点介绍了如何通过setter函数向options数组中添加新数据。通过实例演示了如何触发set函数并观察到计算属性的变化，同时强调了set函数在数据同步中的关键作用。

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发生了改变。
————————————————
原文链接：https://blog.youkuaiyun.com/small_white_123/article/details/117780579