Vue.set视图更新,vue中数组发生变化但视图没有更新
本文主要介绍这一点。$set()方法解决vue中数据更新视图不更新的问题，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue数据更新视图未更新以解决问题。vue数据未更新的原因(数据已更改，但视图未更新)。具体解决流程如下：数组更新检测注意事项；物体变化检测预防措施。
vue数据更新视图不更新
1.1.data中有对象obj:{姓名：元航，年龄：18}
2.这时候加个电话。
这个电话=123456
this.obj.phone=654321 的视图再次更新，但它不是用this更新的。$ set (this.obj， phone ， 654321 )；也不更新。
3.添加后，数据会更新，但视图不会。
解决问题
因为obj中没有电话字段，这个。首次添加属性时应使用$ set (this.obj， phone ， 123456 )；就是这样。
我没有用这个。$set()第一次添加属性，所以我没有设置数据监控。
添加多个属性方法
//而不是“object.assign (this.someobject，{a: 1，b: 2})”
this.someObject=object . assign({ }，this . someobject，{ a: 1，b: 2 })
vue数据不更新的原因(数据更改了，但是视图没有更新)
模板：
div id=应用程序
h2{{dataObj.text}}/h2
/div
js:
新Vue({
埃尔： #app ，
数据：{
dataObj: {}
},
就绪：函数(){
var self=this
/**
*异步请求模拟
*/
setTimeout(function () {
self . data obj={ }；//真正更新数据的就是这一行代码。
self . data obj[ text ]= new text ；
}, 3000);
}
})
上面的代码非常简单。我们都知道vue中data声明的数据具有响应性的特点，所以我们先在data中声明一个dataObj空对象，然后在异步请求中执行两行代码，如下：
self . data obj={ }；
self . data obj[ text ]= new text ；
解决办法
首先清除原始数据，然后添加一个文本属性并赋值。然后更新数据和模板。
其中.text属性不具有响应式，但是数据更新了。原因：
vue的dom更新是异步的，即当setter操作发生时，指令不会立即更新，指令的更新操作会延迟。当指令更新实际执行时。text属性，所以当指令更新模板时会获得新值。
具体流程如下
self . data obj={ }；发生Setter操作。vue检测setter操作，并通知相关指令自行执行更新操作。data obj[ text ]= new text ；赋值语句指示更新开始，所以真正的触发器更新操作是self . data obj={ }；这句话，所以只看上面的例子，具有响应式特征的数据只有dataObj，其子属性不可用。
数组更新检测
Vue包含了一套观察数组的变异方法，所以它们也会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
注意事项
由于JavaScript的限制，Vue无法检测到以下更改的数组：
当您使用索引直接设置一个项目时，例如：vm.items[indexOfItem]=newValue
修改数组长度时，例如：vm.items.length=newLength
例如：
var vm=new Vue({
数据：{
项目：[a ， b ， c]
}
})
Vm.items[1]=x //没有响应
Vm.items.length=2 //没有响应
解决第一类问题，下面两种方式可以达到和vm.items[indexOfItem]=newValue一样的效果，也会触发状态更新：
//Vue.set
Vue.set(vm.items，indexOfItem，newValue)
//Array.prototype.splice
vm.items.splice(indexOfItem，1，newValue)
您也可以使用虚拟机。$set实例方法，它是全局方法Vue.set的别名：
vm。$set(vm.items，indexOfItem，newValue)
要解决第二种问题，您可以使用splice:
vm.items.splice(新长度)
对象更改检测注意事项
仍然由于JavaScript的限制，Vue无法检测对象属性的添加或删除：
var vm=new Vue({
数据：{
答：1
}
})
//`VM.a `现在有响应了。
vm.b=2
//`VM.b `没有响应。
对于创建的实例，Vue不能动态添加根级别的响应属性。但是，您可以使用Vue.set(object，key，value)方法向嵌套对象添加响应属性。例如，对于：
var vm=new Vue({
数据：{
用户配置文件：{
姓名：“夏嫣”
}
}
})
您可以向嵌套的userProfile对象添加新的年龄属性：
Vue.set(vm.userProfile， age ，27)
您也可以使用虚拟机。$set实例方法，它只是全局Vue的别名。set:
vm。$set(vm.userProfile， age ，27)
有时您可能需要为现有对象分配多个新属性，例如使用Object.assign()或_。扩展()。在这种情况下，您应该使用两个对象的属性创建一个新对象。所以，如果你想添加一个新的响应属性，不要像这样：
Object.assign(vm.userProfile，{
年龄：27，
收藏夹颜色：“绿色”
})
你应该这样做：
vm.userProfile=object . assign({ }，VM . user profile，{
年龄：27，
收藏夹颜色：“绿色”
})
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。