Vue.js 方法与计算属性。它们如何与 DOM 交互答案

【问题标题】：Vue.js methods vs computed properties. How they interact with the DOMVue.js 方法与计算属性。它们如何与 DOM 交互
【发布时间】：2017-12-22 18:41:01
【问题描述】：

我试图弄清楚何时调用方法属性，以及何时最好调用计算属性。在我看来，计算通常更可取，因为只要调用访问 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 是否必须运行所有相关属性？什么时候方法比计算属性更好？

【问题讨论】：

标签： dom methods vue.js

【解决方案1】：

在第一种情况下，计算属性和方法都必须被调用，原因略有不同。首先，更新 counter 会触发重新渲染，因为在模板中引用了 counter。同样，resultComputed 被触发是因为 counter 发生了变化。最后因为模板被重新渲染，resultMethod 被调用，因为它在模板中被引用了。

让我们在第二个案例中添加secondCounter 作为属性，增加它的按钮，然后将secondCounter 添加到模板中。在这种情况下，当您增加secondCounter 时，因为模板中引用了secondCounter，所以会触发重新渲染。 resultMethod 将被再次调用，因为它在模板中被引用，但resultComputed没有被触发。 resultComputed 只有在 counter 发生变化时才会重新计算。

只有当函数内部使用的数据发生变化时，Vue 才会重新计算计算属性。

因为您在模板中引用了resultMethod，所以每次 Vue 重新渲染时都会调用它。每当 counter 和 secondCounter 更改时，必须重新渲染 Vue，因为它们也在模板中被引用。如果您将counter 从模板中取出，Vue 仍会重新渲染，因为resultMethod 依赖于它，并且模板中引用了resultMethod。

【讨论】：