详解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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
微信小程序实现搜索历史功能
Mar 26 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP实现递归无限级分类
2015/10/22 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
css图片自适应大小
2007/11/28 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JS与C#编码解码
2013/12/03 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
js实现碰撞检测
2021/01/29 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python模拟表单提交登录图书馆
2018/04/27 Python
带你认识Django
2019/01/15 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python datetime模块使用方法小结
2020/06/18 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
cf收人广告词
2014/03/14 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
班级管理经验交流材料
2015/11/02 职场文书