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

我想弄清楚什么时候调用方法属性，而不是什么时候最好调用一个计算属性。在我看来，计算通常是可取的，因为任何时候访问DOM的方法都会响应一个方法。Vue.js方法vs计算属性。他们如何与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是否必须运行每个相关的属性？什么时候方法比计算的属性更好？

来源

2017-07-18 DMrFrost

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

让我们来看看第二种情况，并将secondCounter作为一个属性，一个增加它的按钮，并将secondCounter添加到模板中。在这种情况下，当您增加secondCounter时，由于在模板中引用了secondCounter，所以会触发重新呈现。 resultMethod将被称为再次，因为它在模板中被引用，但resultComputed是而不是触发。 resultComputed只有在counter更改时才会重新计算。

Vue只会在函数内部使用的数据更改时重新计算计算属性。

因为您正在引用模板中的resultMethod，所以每调用一次时，就会调用。只要counter和secondCounter发生更改，Vue必须重新呈现，因为它们在模板中也被引用。如果您从模板中取出counter，Vue仍然会重新呈现，因为resultMethod取决于它，并且模板中引用了resultMethod。

来源

2017-07-18 05:36:34 Bert

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

回答

相关问题