鍍金池/ 問(wèn)答/HTML/ 如何看待vue2修改data的值后把模板全部都刷新了一遍?

如何看待vue2修改data的值后把模板全部都刷新了一遍?

例子可以參考:
https://jsfiddle.net/k6f32hsv/

在上面例子中可以看到，當(dāng)修改了data中一個(gè)數(shù)據(jù)的值，vue把模板全部重新渲染了，而不是被修改數(shù)據(jù)對(duì)應(yīng)模板的那一塊。

現(xiàn)在項(xiàng)目中有個(gè)問(wèn)題就是使用vuex,需要頻繁修改數(shù)據(jù)，如onmousemove事件中。
那么頁(yè)面中的其它組件檢測(cè)到vuex數(shù)據(jù)改變,也會(huì)重新刷新一遍模板。導(dǎo)致性能浪費(fèi)。
特別在onmousemove事件中。頻繁刷新是否一件好事？

回答
編輯回答
安若晴

計(jì)算屬性computed 了解一下

為什么method每次都會(huì)調(diào)用呢？考慮

method: {
  showRandom() {
    return Math.random();
  },
  showConstant() {
    return 42;
  }
}

需要刷新視圖的時(shí)候，我們是應(yīng)該調(diào)用method呢，還是不應(yīng)該呢？Vue不可能知道函數(shù)返回值會(huì)不會(huì)變，為了避免出錯(cuò)，只能全都調(diào)用。

但是這樣確實(shí)浪費(fèi)了性能，computed就是用來(lái)解決這個(gè)問(wèn)題的。computed相當(dāng)于顯式地告訴Vue，只要依賴項(xiàng)沒(méi)變，函數(shù)返回值就不會(huì)變，就不需要刷新。這樣的話，只修改data中一個(gè)數(shù)據(jù)的值，其他部分不會(huì)刷新。

具體到題主的情況，vuex提供mapState，可以用來(lái)取代上面的show函數(shù)，填到計(jì)算屬性里面就可以了。mapState 輔助函數(shù)

2017年1月22日 22:14