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

Question

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

在上面例子中可以看到，当修改了data中一个数据的值，vue把模板全部重新渲染了，而不是被修改数据对应模板的那一块。

现在项目中有个问题就是使用vuex,需要频繁修改数据，如onmousemove事件中。
那么页面中的其它组件检测到vuex数据改变,也会重新刷新一遍模板。导致性能浪费。
特别在onmousemove事件中。频繁刷新是否一件好事？

Answer 1

计算属性computed 了解一下

为什么method每次都会调用呢？考虑

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

需要刷新视图的时候，我们是应该调用method呢，还是不应该呢？Vue不可能知道函数返回值会不会变，为了避免出错，只能全都调用。

但是这样确实浪费了性能，computed就是用来解决这个问题的。computed相当于显式地告诉Vue，只要依赖项没变，函数返回值就不会变，就不需要刷新。这样的话，只修改data中一个数据的值，其他部分不会刷新。

具体到题主的情况，vuex提供mapState，可以用来取代上面的show函数，填到计算属性里面就可以了。mapState 辅助函数