为啥从计算切换到方法时，以下 Vue.js 代码不起作用？

Posted 2023-02-22

【中文标题】为啥从计算切换到方法时，以下 Vue.js 代码不起作用？

【英文标题】：Why does the following Vue.js code not work when switching from computed to methods?为什么从计算切换到方法时，以下 Vue.js 代码不起作用？

【发布时间】：2019-03-29 15:13:39

【问题描述】：

在以下代码中：

https://jsfiddle.net/willywg/2g7m5qy5/

根据复选框的状态禁用按钮。

但是当我改变时：

  computed: 
    isDisabled: function()
        return !this.terms;
    
  

到

  methods: 
    isDisabled: function()
        return !this.terms;
    
  

启用/禁用不再起作用。

这是为什么？

根据文档：

https://vuejs.org/v2/guide/computed.html

在这个例子中两者的工作方式不应该相同吗？

【问题讨论】：

因为计算是反应性的，方法不是。如果在这种情况下使用方法，则每次检查/取消检查输入时都需要调用该方法。

【参考方案1】：

计算属性会查找更改，但需要使用 @change 或 @click 之类的方式调用方法。在这种情况下，您实际上可以只绑定您的数据对象而无需任何一个。

<div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
    </label>
  </p>
  <button :disabled='!terms'>Send Form</button>
</div>

new Vue(
  el: '#app',
  data: 
    terms: false
  
)

【参考方案2】：

计算和方法是两个不同的东西

方法：当你想做某事时调用，比如调用一个动作/突变或做一些除了处理存储/状态之外的事情

computed：你可以使用返回值来绑定模板html中的东西，一些变化的值会根据一些计算而变化。如果它不会改变，那么只需将其绑定到日期/状态

在您当前的脚本中计算定位 isDisabled 数据一直在变化。 因此，每当您的数据更改其功能时，都会自动触发。

但是，如果您希望在方法中使用此功能，则应手动触发该功能。 示例：

<input id='terms' type='checkbox' v-model='terms' @change="isDisabled" /> I accept terms!!!

当它发生变化时，它会调用 isDisabled 方法。

更多详情Methods vs Computed。谢谢