vue中data的数组怎么操作会重新渲染页面，怎么操作不会渲染页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-795378.html

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

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

this.$set的实现原理

如果目标是数组，直接使用数组的 splice 方法触发相应式；

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

到了这里，关于vue中data的数组怎么操作会重新渲染页面，怎么操作不会渲染页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！