用計算屬性來響應(yīng)改變

data屬性不是響應(yīng)式的，所以不能寫成
data:{counter:0, result:this.counter>5?Greate 5 : Small5 },而應(yīng)該寫成

然后在html調(diào)用：

現(xiàn)在在增加按鈕和secondCounter時：

那么這個result()方法會在每次更新頁面的時候都執(zhí)行一次，Vue會在每次需要更新的時候更新一次頁面，比如則個secondCounder的狀態(tài)改變的時候，就需要更新頁面，Vue不知道result()函數(shù)是否執(zhí)行了，也不知道result()函數(shù)是否用到改變了的屬性，所以Vue不知道secondCounter的變化是否會影響result()函數(shù)，所以它也重復(fù)執(zhí)行了result()函數(shù)
在這種情況下，可以用一個新的全局Vue對象上的屬性，Computed（計算屬性）

點(diǎn)擊increase時，output和result都被執(zhí)行了，因?yàn)槲腋淖兞薱ounter的屬性值，然后輸出了computed里的依賴，counter的output屬性，依賴counter的屬性就被刷新了。即result()函數(shù)被執(zhí)行了。
當(dāng)我點(diǎn)擊increaseSecond，它只會增加secondCounter的值，
computed的output沒有用到這個屬性，如果我點(diǎn)擊increaseSecond，就只能看到綁定了的方法，computed不會被執(zhí)行，
因?yàn)閂ue不會注意到其中的屬性是什么，這里只有computed的屬性，

著就是我們在點(diǎn)擊increaseSecond,按鈕時沒有看到Computed的原因，
這就是當(dāng)我們處理依賴性屬性時，怎么使用computed屬性的方法。

因?yàn)閂ue會緩存結(jié)果，所以只在需重寫計算屬性時，才重寫計算，所以只有當(dāng)呢不需要緩存結(jié)果時，才用到result()這種函數(shù)的形式，也就是你下每次DOM更新時，都重寫計算result，因?yàn)橛謺r候，可能情況就需要這樣。
比如，你更新的是不再調(diào)用的函數(shù)中的屬性。

總結(jié)：data中定義多個屬性counter1 ，conter2, conter3 ，counter4，通過4按鈕分別改變對應(yīng)的counter值，methods中設(shè)置多個函數(shù)，result1調(diào)用counter1, result2調(diào)用counter2,result3調(diào)用counter3，在computed中設(shè)置方法output，output調(diào)用counter4。然后再P標(biāo)簽中調(diào)用result1，result2，result3，output。點(diǎn)擊按鈕1，result1，result2，result3都會被執(zhí)行，點(diǎn)擊按鈕2，按鈕3也一樣，但是點(diǎn)擊按鈕4時，result1，result2，result3，output都會被執(zhí)行。