Question

我试图找出何时调用methods属性，而不是何时调用计算属性。在我看来，计算通常是优选的，因为方法将在调用访问DOM的属性时随时响应。

在下面的代码中，两个按钮跟踪一个递增1的基本计数器。相同的输出通过方法和计算属性传递给DOM。每个增量都会触发计算机和方法属性，如控制台中所示。

<div id="content">
<!--counter control-->
  <button v-on:click="counter++">Increase Counter</button>
  <button v-on:click="counter--">Decrease Counter</button>

<!--counter output-->
  <p>{{counter}}</p>
  <p>{{ resultMethod() }}</p>
  <p>{{ resultComputed }}</p>
</div>


<script>
  new Vue({
    el: '#content',
    data: {
      counter: 0
    },
    computed: {
      resultComputed: function(){
        console.log("computed.result was run");
        return this.counter < 5 ? 'small_number' : 'LARGENUMBER';
      }
    },
    methods: {
      resultMethod: function(){
        console.log("methods.result was run");
        return this.counter < 5 ? 'small_number' : 'LARGENUMBER';
      }
    }
  })
</script>

现在，如果我们添加另外几个数据属性，我们可以看到跟踪它们并不会导致触发方法或计算属性。

<!--new data options-->
  <button v-on:click="secondCounter++">Second Counter</button>
  <button v-on:click="formSubmit=true">Form Submit</button>

    //New Data Properties
      secondCounter: 0,
      formSubmit: false

现在向DOM显示这些数据属性首先显示数据确实被正确跟踪，其次这些操作触发与我们的计数器相同的方法属性，即使这些变量与此方法无关。

  <p>{{secondCounter}}</p>
  <p>{{formSubmit}}</p>

最后，如果我们创建一个完全随机且无关的方法并在DOM中引用它，那么每当我们的任何变量从DOM更改时，也会调用它。我以简单的方法为例。

<h2>{{ unrelatedMethod() }}</h2>

unrelatedMethod: function(){
    console.log("We are now using another random method");
    var number = 2000;
    return number;
  }

那么幕后究竟发生了什么？每次更新DOM时，Vue是否必须运行每个相关属性？什么时候方法比计算属性更好？

Answer 1

在第一种情况下，必须调用计算属性和方法，原因略有不同。首先，更新计数器会触发重新渲染，因为模板中会引用计数器。同样，由于resultComputed已更改，因此会触发counter。最后，因为正在重新呈现模板，所以会调用resultMethod，因为它在模板中被引用。

让我们参与你的第二个案例的一部分并添加secondCounter作为属性，增加它的按钮，并将secondCounter添加到模板。在这种情况下，当您递增secondCounter时，因为模板中引用了secondCounter，所以会触发重新渲染。 resultMethod将再次被称为，因为它已在模板中引用，但resultComputed 未已触发。只有在resultComputed更改时才会重新计算counter。

Vue只会在其功能内部使用的数据发生变化时重新计算计算属性。

因为您在模板中引用resultMethod，所以在重新呈现Vue的每个时间都会调用。每当counter和secondCounter发生更改时，都必须重新呈现Vue，因为它们也会在模板中引用。如果您从模板中取出counter，则Vue仍会重新呈现，因为resultMethod依赖于它，并且模板中引用了resultMethod。

Vue.js方法与计算属性。他们如何与DOM互动

1 个答案: