目录
第一种情况：直接修改计算属性
不生效举例
解决方案1：直接修改依赖变量
解决方案2：为计算属性设置 set 方法
第二种情况：直接修改依赖数据
不生效举例
解决方案
第一种情况：直接修改计算属性
在Vue中，computed属性是用来声明计算属性的。计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。因此，如果你尝试直接修改一个计算属性的值，这个修改是不会生效的。计算属性的值是由它们的函数逻辑计算得出的，而不是通过直接赋值来设置的。
不生效举例
<template>
<div @click="changeRead">{{ readOnly }}</div>
</template>
<script>
export default {
data(){
return {
canRead:true
}
},
computed:{
readOnly(){
return this.canRead
}
},
methods:{
changeRead(){
//此时点击该方法 修改无效控制台还会出现警告信息
this.readOnly = false
}
}
}
</script>如果你希望修改一个计算属性的值并使其生效，你需要通过修改计算属性所依赖的数据来触发重新计算。只有当计算属性依赖的数据发生变化时，计算属性才会重新计算并更新值。
解决方案1：直接修改依赖变量
//这样会生效
this.canRead = false解决方案2：为计算属性设置 set 方法
<template>
<div @click="changeRead">{{ readOnly }}</div>
</template>
<script>
export default {
data(){
return {
canRead:true
}
},
computed:{
readOnly:{
get(){
return this.canRead
},
set(val){
//设置了set方法，可直接修改计算属性
//在这里修改依赖数据
this.canRead = val
}
}
},
methods:{
changeRead(){
//直接修改计算属性
this.readOnly = false
}
}
}
</script>第二种情况：直接修改依赖数据
通过第一种情况我们知道了，要修改计算属性的值，必须要修改计算属性的依赖变量，但有一种情况及时修改了依赖变量的值，计算属性的值任然不会变化
不生效举例
<template>
<div @click="changeRead">{{ readOnly }}</div>
</template>
<script>
export default {
data(){
return {
canRead:true,
readOnly:true,
}
},
computed:{
readOnly(){
return this.canRead
}
},
methods:{
changeRead(){
//修改计算属性的依赖变量
this.canRead = false
}
}
}
</script>原因就是因为在data中有与computed属性同名的变量 ，在vue中如果遇到同名变量data中的优先级会大于computed
解决方案
解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候，看一看data中或props中是否有跟计算属性同名的变量，这时候就要考虑是要删除该变量，还是改变计算属性的命名了。
