vue数组变化之后没办法重新渲染,vue修改对象的属性会发生渲染吗
本文主要介绍如何解决Vue绑定对象和数组变量改变后无法渲染的问题。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
项目场景：
页面显示上有一个ul标签，所以我们需要动态显示列表数据。因为除了列表值之外还有其他值要显示在我们的页面上，所以列表数据的数据结构是一个对象下的数组。动态修改数据后发现没有自动渲染。
问题描述：
点击按钮“点击我！”尽管数据在控制台中被更改和输出，但列表数据不会呈现。
代码如下：
script src= https://UNP kg . com/vue/dist/vue . js /script
div id=应用程序
button @ click= pushDataToDataList 点击我！/按钮
保险商实验所
li v-for=(item，i) in form.dataList :key=item
{{ i : item }}
/李
/ul
/div
脚本
let app=new Vue({
数据：函数(){
返回{
表单：{}
}
},
方法：{
pushDataToDataList() {
if (this.form.dataList==null) {
this.form.dataList=[]
}
this . form . datalist . push( ABC this . form . datalist . length)
console.log(this.form.dataList)
}
}
}).$ mount(“# app”)
/脚本
原因分析：
查阅官方文件后，我们发现了下面这段话
由于JavaScript的限制，Vue无法检测数组和对象的变化。然而，有一些方法可以避免这些限制并确保它们的响应性。
对于对象：Vue无法检测属性的添加或删除。因为Vue将在初始化实例时对属性执行getter/setter转换，所以属性必须存在于数据对象上，Vue才能将其转换为responsive。
对于阵列：Vue无法检测以下阵列中的更改：
当您使用索引直接设置数组项时，例如：vm.items[indexOfItem]=newValue
修改数组长度时，例如：vm.items.length=newLength
原因在这里显而易见。我们的数据没有被呈现，因为在开始时，在data下的表单中没有dataList属性。因此，即使该值后来发生了变化，Vue也无法检测到它的变化。不仅是数组，js对象也是如此。另外，通过下标直接修改数组的元素不会触发视图渲染。
下列数组方法将触发数组渲染：
Push(element) //在数组末尾添加一个元素
Pop() //删除数组的最后一个元素并返回
Shift() //删除数组的第一个元素并返回它
Unshift(ele1，ele2，…，eleN) //将一个或多个元素添加到数组的开头，并返回新的长度。
拼接(开始，删除计数？item)//删除数组中的元素，并在其位置用新元素替换。
Sort() //对数组排序会修改数组元素的位置。
Reverse() //反转数组元素将修改数组元素的位置。
解决方案：
1.在“数据”下的表单对象中，设置“数据列表”属性。因为前端在处理数据的时候就知道代码结构是什么，所以提前设置也方便后续的开发和理解。建议用途
数据：函数(){
返回{
表单：{
数据列表：空
}
}
}
2.用这个。$set()方法
pushDataToDataList() {
if (this.form.dataList==null) {
//首先设置form下的dataList属性
这个。$set(this.form， dataList ，[])
}
this . form . datalist . push( ABC this . form . datalist . length)
console.log(this.form.dataList)
}
参考链接
检测Vue中数据变化的注意事项
关于如何解决Vue绑定对象和数组变量改变后无法渲染的问题，本文到此为止。关于Vue绑定对象和数组变量更改后无法渲染的问题，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。