详解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 相关文章推荐
js弹出窗口之弹出层的小例子
Jun 17 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
js代码实现轮播图
May 04 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
微信公众平台天气预报功能开发
2014/07/06 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
利用php生成验证码
2017/02/23 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
纯JS实现轮播图
2017/02/22 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
为什么要做架构设计
2015/07/08 面试题
信息学院毕业生自荐信范文
2014/03/04 职场文书
办公室规章制度范本
2015/08/04 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server