详解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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
xml转json的js代码
Aug 28 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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
laravel中的一些简单实用功能
2018/11/03 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python实现排序算法
2014/02/14 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python实现密码薄文件读写操作
2019/12/16 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python 装饰器重要在哪
2021/02/14 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
员工离职感谢信
2015/01/22 职场文书
2015学校年度工作总结
2015/05/11 职场文书
在职证明范本
2015/06/15 职场文书