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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
美酒没故事°2 分钟前
npm源管理器:nrm
前端·npm·npm源
用户22152044278003 分钟前
vue3组件间的通讯方式
前端·vue.js
三十_A20 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子28 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒28 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691529 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影29 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天31 分钟前
CSS 属性值的计算与过程
前端
云鹤_31 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei33 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端