Vue -数据更新检测的大坑!!!(一)

标题数据更新检测

  • Vue是数据驱动的,如果某个数据类型是数组类型,在一些数组的炒作下是可以更新页面的,还有一些数组的操作不会引起页面的更新。
  • 下面的数组方法是可以引起页面更新的(编译方法)
    • unshift() 前面增加
    • push() 后面增加
    • shift() 前面删除
    • pop() 后面删除
    • splice() 高级方法删除、添加、删除
    • sort() 排序
    • reverse() 倒序
  • 下面两种方式修改数组是不会引起页面的更新的:
    • 直接通过下标的方式修改数组 vm.arr[10]=“halo”
    • 通过length修改数组 vm.arr.length=num
    • 解决办法:
      • 1.使用 Vue.set(target,index,value)的静态方法
      • 2.使用实例对象 vm.$set(target,index,value) 方法
        • Vue.set(target,index,value)
        • target 要修改的数据源
        • index 要修改的下表
        • value 要修改成什么样
  • 对象更新检测的问题
    • 直接给对象新增一个属性是不会引起页面更新的
    • 解决办法:
      • 使用Vue.set(target,key,value)或者vm.$set(target,key,value)
      • Vue.set(target,key,value)
      • target 要添加的数据源
      • key 要添加的key
      • value 要修改成什么样

!!! 以上是DaXiong本人对前端知识的理解总结,如内容知识有错误可以留言修改。

!!!如果以上内容帮助到了你,点击一下赞或者收藏吧!

你可能感兴趣的:(JavaScript,vue,javascript,vue.js)