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交互

回答

相關問題