对 Vue 数据响应式的理解

121 阅读1分钟

数据响应式的理解

vm=new Vue({data:mydata}

将数据mydata放到data上并被vmobject.defineProperty生成一个新的mydata替换掉data里的mydata然后给新数据对象添加gettersetter监听,当this.data数据被任何一处更新,会通知vm并且被监听到,这样就能及时更新ui image.png

Vue中数组的变异方法

当数据中有数组,数组不能用this.$set添加,因为不确定数据个数,所以这是vue篡改了数组的原型,并让这7个API自带监听和代理

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse() 例如给数组中添加d
    this.array.push("d")log的结果如图被篡改的数组 篡改.png