Vue--数据代理

Object.defineProperty

const person = {}; // 创建一个新对象

person.name='xusx'

// 通过 defineProperty 使用数据描述符添加对象属性的示例

Object.defineProperty(person, "age", {

value: 37, // 默认值

writable: true, // 不可写 默认false

enumerable: true, // 是否可以枚举 默认false

configurable: true // 控制属性可否被删除

});
数据代理:get\set方法

person实际的属性值为xusx对象的属性值

复制代码
		var xusx={}
		xusx.age=30
		var person={}
		person.name="xysx"
		Object.defineProperty(person,'age',{
			get(){
				return xusx.age
			},
			set(){
				 xusx.age
			}
		})

Vue中的数据代理


Vue对象data在其属性中为_data

总结

1、通过Vue对象来代理data对象中属性的操作(读\写)

2、通过Object.defineProperty ()把data对象中所有的属性添加到Vue上,为每一个添加到Vue上的属性,都制定一个getter/setter。去操作(读、写)data中对应的属性。

数据监视

  • 1、vue会监视data中所有层次的数据
  • 2、 通过setter实现监视,在new Vue就要传入要检测的数据
  • 3、如果需给后添加的数据所响应式处理,则使用如下api:
    Vue.set(target,propertyName,value)
    注:Vue.set无法给根数据添加属性,即data下添加熟悉


相关推荐
Bellafu6661 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构