详解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控制上传文件的大小
Oct 26 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
Jquery Fade用法详解
Nov 06 jQuery
浅谈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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
一个php作的文本留言本的例子(五)
2006/10/09 PHP
教你如何把一篇文章按要求分段
2006/10/09 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
利用python生成照片墙的示例代码
2020/04/09 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
航空大学应届生求职信
2013/11/10 职场文书
会议开场欢迎词
2014/01/15 职场文书
先进集体事迹材料
2014/02/17 职场文书
卖车协议书
2014/04/21 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
公司2014年度工作总结
2014/12/10 职场文书
个人求职意向书
2015/05/11 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS