vue实例其中一个数据一旦发生变化整个实例都要重新渲染还是只渲染数据改变的地方

Question

computed:{ name() { return `${this.firstName} ${this.lastName}` },可以缓存计算后的数据，而method:{ name() { return `${this.firstName} ${this.lastName}` } 不缓存计算后的数据，所以当 number这个变量的发生变化的时候，整个vue重新渲染，而computed里的name() 的返回值是缓存的，所以不用再调用这个方法直接渲染缓存的值。而method:{} 里的name()返回值没有缓存所以就需要重新调用这个方法得到计算后的返回值才可以渲染。如果我理解正确的话。在渲染的数据需要经过大量的计算后得到才能进行渲染的情况下， 使用computed比使用method的性能要高的原因在于 vue实例其中一个数据一旦发生变化整个实例都要重新渲染，computed有缓存不用重新调用方法直接可以得到渲染的数据而method没有缓存需要不断调用方法返回渲染的数据

Answer 1

Jokcy 2018-09-24 11:45:33

整个实例都会重新计算，但并不会全部重新渲染，要经过虚拟DOM的diff再根据需求重新进行渲染

• 提问者 湫朋 #1

  是不是可以认为在渲染的数据需要经过大量的计算后得到才能进行渲染的情况下， 使用computed比使用method的性能要高的原因在于 vue实例其中一个数据一旦发生变化整个实例都要重新计算，computed有缓存不用重新调用方法直接可以得到渲染的数据而method没有缓存需要不断调用方法返回渲染的数据

• Jokcy 回复 提问者 湫朋 #2

  是的。