zoukankan      html  css  js  c++  java
  • vue 改变data内的数据 但是视图没有改变的三种解决方法

    在vue中,data里面的数据改变了,试图却没有更新,常见的情况是

    1、直接通过数组下标来修改数据,如:this.arr[i] =‘ll’
    2、当你想置空数组时,this.arr.length = 0 || this.arr = [ ]
    3、对象的值修改,例如:this.obj.batchName == 1
    原因是

    Vue2.+ 中data数据对象是通过Object.defineProerty来进行数据的双向数据绑定,

    而数组则是监听数组的push和pop等操作数组的方法进行双向绑定的,

    因此当是通过下标来修改时便不能更新视图

    异步队列更新dom导致的视图不更新,因为默认情况下,vuejs 是异步执行 dom 更新操作的。

    在下一个 tick 来临之前,vuejs 会收集数据变化,置于一个队列之中,下个 tick 来临之时,批量执行这些更新,并清空队列。

    虽然大部分情况下我们不需要关心这个更新 dom 机制,但是当下一步操作与之有关联时,我们就只能使用 nextTick 来解决了。

    即下一个数据的页面更新,依赖与上一个数据的页面更新完成时,才需要使用this.nextTick()来解决

    解决的方法有三种 我最常用的是this.$set()方法:

    this.set(this.arr,‘2’,’‘testStr’’) 即this.$set(obj,key,val)

    代码示例:

     

  • 相关阅读:
    团队第十天成果及燃尽图。
    团队第九天成果。
    团队第八天成果。
    各组建议。
    团队任务,团队报告。
    团队第六,七天成果。
    团队第五天成果
    最大连续子数组和(简单一维dp)
    小白鼠问题(海明码)
    JUnit练习
  • 原文地址:https://www.cnblogs.com/qlb-7/p/12780450.html
Copyright © 2011-2022 走看看