vue视图不更新的原理是什么,vue对象改变视图不更新
当我们在vuex中操作数据时，会遇到视图不更新的情况。下面这篇文章主要介绍关于vuex更新视图的一些思考。通过示例代码详细介绍，有需要的朋友可以参考一下。
目录
场景解决方案总结扩展vuex可以集中存储和管理一个应用的所有组件的状态。当Vue组件从存储中读取状态时，如果存储中的状态发生变化，相应的组件将相应地高效更新。
但是，最近，我踩到了vuex的坑：
场景
当您第一次进入加载数据页面时，数据将不会显示。点击按钮或切换页面后，将显示数据。通过分析发现，第一次加载页面时，得到的数据是{}(空对象)。当获得数据时，执行commit()，并且状态中的数据已经被commit()改变。更新的数据也可以通过在页面中计算获得。但是视图不会更新，采集的数据也不会显示。
解决
尝试在页面中发送commit()以再次更新视图是无效的。
Will Vue.set(state， myData ，Data)，无效。
.
最终方案：
代码中声明的对象中的键是动态的，所以一开始只声明了{}。
原来数据是数组的时候，不能直接通过索引赋值，数组的长度也不能修改。Vuex将只跟踪对象创建时存在的属性，添加到对象的新属性不会触发更新。
并且循环嵌套层级太深，视图也可能不更新
最后给array对象赋一个值，写在这里转换，生效。如下所示：
const store=new Vuex。商店({
状态：{
我的数据：[]
},
突变：{
setData(状态，数据){
//state.myData=data不更新视图。
Vue.set(state， myData ，JSON.parse(JSON.stringify(data)))
}
},
动作：{
myFn () {
store.commit(setData )
}
}
})
导出默认存储
如果添加了新的对象属性，也可以使用Object.assign()，但它必须是深拷贝(否则，添加到对象的新属性将不会触发更新)
Let some object=object.assign ({}，some object，{ new field:value })//深度复制
//object . assign(this . someobject，{key: 1})//light copy
总结
您不能直接更改商店中的状态。改变store中状态的需求提交 (commit)突变可以通过在组件中调用store中的状态并在calculated属性中返回来获得，也可以直接$store.state来获得calculated: {
myData () {
返回store.state.myData
}
},
已安装(){
console . log(this . store . state . my data)
}
向数组添加新属性不会触发视图更新，因为vue不会添加监听新属性的get和set。
分配的数据，如果循环嵌套层次太深，视图可能无法更新。
扩展
这些方法在阵列上运行，vue可以检测数据变化：
推送()
流行()
shift()
未移位()
拼接()
排序()
反向()
而下面不会改变原数组(返回一个新数组)，这是vue检测不到的：
过滤器()
concat()
切片()
关于vuex更新视图引发的一些思考这篇文章到此为止。有关vuex更新视图的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。