未在任何地方引用的 Vue 计算属性

Posted 2023-02-23

【中文标题】未在任何地方引用的 Vue 计算属性

【英文标题】：Vue computed property that isn't referenced anywhere

【发布时间】：2018-07-06 23:24:57

【问题描述】：

问题

如何创建一个虚拟的computed 属性，当它依赖的模型元素发生变化时将调用该属性，而不必说计算属性？

背景

我的父母是一些设置 ajax 查询参数的表单控件。当它们发生变化时，我需要从服务器获取数据，然后我 $emit 将新数据发送到子组件。

最初，我有一个名为updateTable 的method，它通过@change="updateTable()" 在每个元素上调用。

不喜欢将@change 添加到我所有的input 中，所以我创建了一个虚拟计算属性来利用自动依赖检测/重新计算。问题是 Vue 在我的情况下“太”聪明了，因为我实际上并没有在任何地方引用计算属性。一种解决方法是添加<div style="display:none">dummyProp</div>，但这似乎很老套。

我的模式错了吗？还是有更好的 Vue 方式来做到这一点？

【问题讨论】：

当模型元素依赖变化时会被调用这听起来像一只手表。

> "我将$emit 新数据传给子组件。"是的，这可能是错误的模式。为什么他们没有收到道具？

【参考方案1】：

您应该有一个computed 生成查询参数对象。当表单输入更改时，查询参数对象会更新。发送 ajax 请求的观察者，其回调更新我希望子组件的道具。

如果您的表单元素绑定到变量，那么无论如何您都不应该使用@change，您应该一直在观察变量——而且您会看到，因为computed 就是这样做的。

【讨论】：

这是个好主意...已经计算创建查询数据...并单独观察该变量。

我现在遇到的一个问题是我的计算属性没有在加载时触发...我猜在mounted 我可以修改计算属性所依赖的值，但这似乎哈克。

除了在您的观察者中之外，只需在 created 中进行 ajax 调用。

【参考方案2】：

html 不需要引用您的计算属性来保持反应性。例如，您可以：

data: 
  return 
    inputA: 'A',
    inputB: 'B'
  
,
computed: 
  myProperty() 
    return this.inputA + this.inputB
  
,
methods: 
  callWithMyProperty() 
    ajaxFunction(this.myProperty)
  

每当您使用这样的模式调用callWithMyProperty 时，它将使用最新版本的inputA 和inputB。我假设您可能正在使用不同的（可能是非 Vue）模式，这导致了问题。