在计算属性中使用条件逻辑无法更新

Question

我有两个小提琴:A,B(使用Vuejs 2.2.4)

我有一个计算属性,可以通过编程方式更改(我正在使用get和set方法).

期望:

1. 如果默认参数changes(this.message),则计算的property(computedMessage)必须更改(默认行为).

2. 如果辅助参数更改(this.messageProxy),则只有计算属性必须反映辅助参数.

小提琴A按预期工作但小提琴B没有.

错误:辅助参数更改后,默认行为(第1点)停止.

fiddles之间的唯一区别是console计算属性中的语句.

---

背景:我试图以computed编程方式设置属性.该computed属性设置如下:

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
  }
}

这允许我设置computedMessagelike 的值:

this.computedMessage = 'some string'

如果这些行:

get () {
  let messageProxy = this.messageProxy
  this.messageProxy = null
  return messageProxy || this.message
}

被替换为:

get () {
  return this.messageProxy || this.message
}

然后computedMessage再也无法进入this.message当前this.messageProxy设定的那一刻.

通过设置this.messageProxy,以null我保证

computedMessage = this.messageProxy

只有在作出任务时.

Answer 1

this.messagereturn语句中对的引用不会触发computedMessage更新。这是因为其在逻辑||语句中的位置使其无法访问。这是Vue.js计算属性文档中记录的陷阱。

从文档中：

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
}

您的第一个小提琴之所以能按预期工作，是因为该console.log调用具有this.message一个参数。