Vue JS - 当其中使用的字段更新时,观看计算如何触发它?

Posted

技术标签:

【中文标题】Vue JS - 当其中使用的字段更新时,观看计算如何触发它?【英文标题】:Vue JS - how does watching a computed trigger it when a field used within it updates? 【发布时间】:2019-04-10 20:15:24 【问题描述】:

我有一个计算字段,它根据问卷中是否填写了文本字段来设置名为“已完成”的数据属性:

setCompleted: function () 
            this.completed = this.required && this.textAnswer !== '';
    ,

我的 html 中没有引用这个计算值,仅用于设置完成的属性。唯一可以更改用户输入的属性是 textAnswer,绑定为文本输入上的模型。

我有一个空的观察者设置来观察这个计算字段,如下所示:

setCompleted: function () 
    ,    

使用 watch set,这可以工作并且 setCompleted 更新,但是没有 watch,setCompleted 在调试时不会被命中,并且 Completed 根本不会更新。

我的问题是 - 当其中使用的字段更新时,观察计算如何使其更新? 使用 watch 设置,Vue 会观察计算中的每个属性进行更改,然后在更改时运行计算?

注意 - 我知道我可以将其重构为观看 textAnswer 并从该手表调用一个方法以更新完成,但我想知道此代码实际上是如何工作的,以及它是否是不好的做法或实际上是允许的使用 Vue。

【问题讨论】:

【参考方案1】:

我认为计算属性的做法是返回一个值,观察者可以看到该值。在这种情况下,完成将是计算值。

computed: 
  completed: function () 
     return this.required && this.textAnswer !== '';
  ,
,
watch: 
  completed: function(val) 
    console.log(val)
  

【讨论】:

谢谢,我知道返回值更正常,但我更感兴趣的是这段代码为什么以及如何实际工作,而不是如何更改它【参考方案2】:

这有帮助吗?

但是,不同之处在于计算属性是基于缓存的 关于他们的依赖。计算属性只会在以下情况下重新评估 它的一些依赖项已经改变。

来自文档:https://vuejs.org/v2/guide/computed.html

根据我的经验,只要观察者返回一个值,当内部使用的属性发生变化时,它会重新评估,它会检查值是否发生变化。

【讨论】:

谢谢,但是当内部使用的属性发生变化时,计算不会重新评估,除非我设置了空的观察者,并且观察者不返回值。更重要的是添加观察者正在做什么使我不明白这项工作!

以上是关于Vue JS - 当其中使用的字段更新时,观看计算如何触发它?的主要内容,如果未能解决你的问题,请参考以下文章

Vue.Js Filters to Computed - 如何使用?

Angular JS在更改后更新输入字段

使用 Vuex 在 Vue.js 中的计算属性上未从观察者更新数据变量

Vue.js 计算属性

Vue.js 计算属性

Vue.js 计算属性