详解Vue源码之数据的代理访问


Posted in Javascript onDecember 11, 2018

概念解析:

1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作
3) 好处: 更方便的操作 data 中的数据
4) 基本实现流程
a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
b. 所有添加的属性都包含 getter/setter
c. getter/setter 内部去操作 data 中对应的属性数据

疑问

不知道你在使用Vue的时候有没有想过,为什么定义在 data 对象中的属性,可以用 Vue 的实例 this 进行访问?

我们来看看源码的实现。

var sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
};

// 源码中是这样调用的:proxy(vm, '_data', key)
// vm是Vue的实例,key是data对象属性的名字
function proxy (target, sourceKey, key) {
 sharedPropertyDefinition.get = function proxyGetter () {
  return this[sourceKey][key]
 };
 sharedPropertyDefinition.set = function proxySetter (val) {
  this[sourceKey][key] = val;
 };
 Object.defineProperty(target, key, sharedPropertyDefinition);
}

比如有个如下demo

const vm = new Vue({
  el: '#app',
  data: { message: 'Hello Vue!' },
  created() {
    console.log(this.message)      // 输出Hello Vue!
    console.log(this._data.message)   // 同样输出Hello Vue!
  }
})

也就是说当我们这样 this.message 写的时候, Vue 通过 Object.defineProperty 给 this.message 设置一层代理,实际访问的是 this._data 里的 message 属性,而 this._data 指向的对象就是我们写的 data 对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
面包屑导航详解
Dec 07 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 #Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 #Javascript
Vue入门之数量加减运算操作示例
Dec 11 #Javascript
简单的React SSR服务器渲染实现
Dec 11 #Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 #Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP中session变量的销毁
2014/02/27 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python实现感知器算法(批处理)
2019/01/18 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python 8种必备的gui库
2020/08/27 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
资深生产主管自我评价
2013/09/22 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
学生生病请假条范文
2014/02/16 职场文书
2014年冬季防火方案
2014/05/21 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript