vue中data的数组怎么操作会重新渲染页面，怎么操作不会渲染页面

目录

会渲染页面的操作

这是为什么呢

不会导致页面渲染的操作

 通过索引值改变数组导致页面不渲染的解决方法

this.$set的实现原理

---

会渲染页面的操作

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
• vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
• Vue.set()的用法
• filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当用这个新数组替换老数组时同样会导致页面更新

这是为什么呢

vue2对于数组中的这些原型对象上的方法进行了重新的封装，对于数组调用这些方法都会使用dep.notify（）通知视图更新。并且如果方法是push、unshift和splice则会对插入的数据再次进行观测

不会导致页面渲染的操作

• 利用索引值直接改变一个值时，例如：this.arr[0] = 100。此时data中的arr[0]会变成100，但是不会渲染到页面上
• 当你修改数组的长度时，例如： this.arr.length = 100

 注意注意：
arr=[{a:1},2]
arr[0].a = 100
这个时候会触发页面重新渲染，因为{a:1}是通过对象的方式进行的数据劫持，也就是说{a:1}有observer

 通过索引值改变数组导致页面不渲染的解决方法

	this.$set(this.arr, 0, 100)

this.$set的实现原理

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）