美文网首页
Vue中数据更新视图不更新解决方法

Vue中数据更新视图不更新解决方法

作者: 金刚狼_3e31 | 来源:发表于2020-08-20 09:27 被阅读0次

在公司做vue项目,数据改变视图不更新,用了$set方法也不好使,为此总结了一些解决这个问题的方法:

1.Vue.$set(target, key, value); 适用于对象或数组

2.oldObj = Object.assign({}, newObj); 适用于对象(注:oldObj必须是已经声明的对象)

3.push(),pop(),shift(),unshift(),splice(),sort(),reverse()可被vue检测到; 适用于数组

4.Vue.nextTick(callback) (Vue 异步执行 DOM 更新)

5.vue多层循环,动态改变数据后渲染的很慢或者不渲染
可在动态改变数据的方法,第一行加上:this.$forceUpdate();

6.很可能是v-for循环时那个key没有设置为唯一值,最好别设置为索引;(数据结构层级嵌套比较深一定要注意,本人就踩过坑)

7.先赋值为null,然后Vue.nextTick(callback)重新赋值正确的数据(这个稍微有点暴力哈。。。),有时候上面几种方法都不管用时可以试试

相关文章

  • Vue中使用$set来添加数据并更新视图的方法

    vue中添加data数据的时候视图是不更新的,vue提供了一种$set的方法来强制修改数据并更新视图的方法: co...

  • Vue中数据更新视图不更新解决方法

    在公司做vue项目,数据改变视图不更新,用了$set方法也不好使,为此总结了一些解决这个问题的方法: 1.Vue....

  • Vue.$nextTick用法

    vue是数据驱动视图更新,但vue数据变化后,视图不会立即更新,而是异步的过程.具体的更新时机参考主队列,异步队列...

  • 记录简单实现Vue2中的响应式原理

    Vue是数据驱动视图模式,数据变更后,会自动更新视图。 原生js中要更新视图通常是通过触发事件,然后修改数据,最后...

  • 小程序实现双向绑定

    我们知道vue是双向绑定的前端框架,视图数据的更新,data就会更新;data更新,视图就会更新;这种双向绑定在小...

  • vue项目中碰到的问题

    vue项目中碰到的问题 路由懒加载写法: Vue 数组/对象更新 视图不更新深拷贝对象或者数组,视图会进行更新对象...

  • vue 双向绑定原理实现

    实现 mvvm 主要包含两个方面,数据变化更新视图,视图变化更新数据 Vue 数据双向绑定(即数据响应式),是利用...

  • vue知识点总结

    持续更新中...... 一:vue中的两个核心点 响应的数据绑定当数据发生改变时,自动更新视图为什么自动更新:利用...

  • vue数据更新,视图无法更新问题

    在vue中修改数据,但是vue没有检测数据修改,视图数据未能更新的情况 使用index索引修改数据时,this.a...

  • Vue.$nextTick()的使用

    Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。Vue.$...

网友评论

      本文标题:Vue中数据更新视图不更新解决方法

      本文链接:https://www.haomeiwen.com/subject/nlfjjktx.html