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

Question

我想弄清楚什么时候调用方法属性，什么时候调用计算属性最好。在我看来，computed 通常更可取，因为只要调用访问 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;
  }

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

Answer 1

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

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

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

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