Vue2 第七节 Vue监测数据更新原理

(1)Vue会监视data中所有层次的数据

(2)如何监测对象中的数据

  • 通过setter实现监视,且要在new Vue时传入要监测的数据
  • 对象中后追加的属性,Vue默认不做响应式处理
  • 如果要给后添加的属性做响应式,使用下面的API,选一个即可

     ① Vue.set(target, propertyName/index, value)

     ② vm.$set(target, propertyName/index, value)

Vue2 第七节 Vue监测数据更新原理_第1张图片

 Vue2 第七节 Vue监测数据更新原理_第2张图片

Vue2 第七节 Vue监测数据更新原理_第3张图片

 修改上面新加的性别:可以修改成功,并且是响应式的

(3)如何监测数组中的数据

  •  通过调用原生对应方法对数组进行更新
  • 数组更新之后会重新解析模板,进而更新界面
  • 修改数组的方法

Vue2 第七节 Vue监测数据更新原理_第4张图片

  •  或者可以通过上面操作对象的方法对数组进行操作

     ① Vue.set(target, propertyName/index, value)

     ② vm.$set(target, propertyName/index, value)

Vue2 第七节 Vue监测数据更新原理_第5张图片

Vue2 第七节 Vue监测数据更新原理_第6张图片

 (4)Vue.set()   和 vm.$set() 不能给vm或者vm的根数据对象(vm._data) 添加属性

你可能感兴趣的:(前端学习,Vue,vue.js,javascript,前端)