我有一个可以通过编程方式更改的计算属性(我正在使用get和set方法).
期望:
>如果默认参数更改(this.message),则必须更改计算属性(computedMessage)(默认行为).
>如果辅助参数发生更改(this.messageProxy),则只有计算属性必须反映辅助参数.
小提琴A按预期工作但小提琴B没有.
computedMessage: {
get () {
let messageProxy = this.messageProxy
this.messageProxy = null
console.log(messageProxy,this.messageProxy,this.message)
return messageProxy || this.message
},set (val) {
this.messageProxy = val
}
}
这允许我设置computedMessage的值,如:
this.computedMessage = 'some string'
如果这些行:
get () {
let messageProxy = this.messageProxy
this.messageProxy = null
return messageProxy || this.message
}
被替换为:
get () {
return this.messageProxy || this.message
}
那么在设置this.messageProxy时,computedMessage就无法再访问this.message了.
通过将this.messageProxy设置为null,我确保了
computedMessage = this.messageProxy
只有在作出任务时.
最佳答案
return语句中对this.message的引用不会触发computedMessage进行更新.这是因为它在逻辑||中的位置声明使其无法访问.这是Vue.js Computed Properties Documentation中记录的问题.
来自Docs:
status: function () {
return this.validated
? this.okMsg
: this.errMsg // errMsg isn't accessible; won't trigger updates to status
}
解决方法是显式访问依赖项:
status: function () {
// access dependencies explicitly
this.okMsg
this.errMsg
return this.validated
? this.okMsg
: this.errMsg
}
因此,在您的示例中添加对this.message的引用:
get() {
this.message
let messageProxy = this.messageProxy
this.messageProxy = null
return messageProxy || this.message
}
原文地址:https://www.jb51.cc/js/429148.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。