<my-card class="card">
<h2 class="title">测试computed的get、set方法</h2>
<el-button @click="testComputed">点击获取新值</el-button>
</my-card>
// 测试computed的get、set方法
const propsValue = ref({
a: 1,
b: 2,
c: { aa: 55, bb: 66 }
})
const computedValue = computed({
get: () => {
console.log('触发get方法')
return JSON.parse(JSON.stringify(propsValue))
},
set: val => {
console.log('触发set方法')
}
})
const testComputed = () => {
// propsValue.value.a = Math.random() // 执行该代码时，会触发 computed的 get 方法
computedValue.value.c = { // 执行该代码时，不会触发 computed的set方法
aa: 555,
bb: 666
}
// computedValue.value = { // 执行该代码时，会触发computed的set方法
// a: 11,
// b: 2,
// c: 3
// }
}根据以上代码说明，在vue3中，
computed的get方法触发条件为：
当computedValue依赖的值改变时，就会触发get方法，
computed的set方法触发条件为：
当改变整个computedValue对象时，才会触发set方法，改变computedValue对象的某个属性的值时，不会触发set方法文章来源：https://www.toymoban.com/news/detail-508687.html
以上内容纯属个人开发过程中遇到的问题及总结，如有错误，可联系博主修改，非常感谢！文章来源地址https://www.toymoban.com/news/detail-508687.html
到了这里，关于vue3中computed的使用详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
