详解Vue源码之数据的代理访问
概念解析：
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 对象。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue中之nextTick函数源码分析详解，包括了Vue中之nextTick函数源码分析详解的使用技巧和注意事项，需要的朋友参考一下 1. 什么是Vue.nextTick()？ 官方文档解释如下： 在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 2. 为什么要使用nextTick? 如上代码 在页面视图上显示bb，但是当我在控制台打印
-
本文向大家介绍Vue源码解析之数据响应系统的使用，包括了Vue源码解析之数据响应系统的使用的使用技巧和注意事项，需要的朋友参考一下 接下来重点来看Vue的数据响应系统。我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路，然后再看源码。这里也借鉴了这种方式，感觉这样的确更有利于理解。 数据双向绑定的思路 1. 对象 先来看元素是对象的情况。假设我们有一个对象和一个监测方法： 我
-
本文向大家介绍详解Vue源码中一些util函数，包括了详解Vue源码中一些util函数的使用技巧和注意事项，需要的朋友参考一下 JS中很多开源库都有一个util文件夹，来存放一些常用的函数。这些套路属于那种常用但是不在ES规范中，同时又不足以单独为它发布一个npm模块。所以很多库都会单独写一个工具函数模块。 最进尝试阅读vue源码，看到很多有意思的函数，在这里分享一下。 Object.protot
-
本文向大家介绍通过源码分析Vue的双向数据绑定详解，包括了通过源码分析Vue的双向数据绑定详解的使用技巧和注意事项，需要的朋友参考一下 前言 虽然工作中一直使用Vue作为基础库，但是对于其实现机理仅限于道听途说，这样对长期的技术发展很不利。所以最近攻读了其源码的一部分，先把双向数据绑定这一块的内容给整理一下，也算是一种学习的反刍。 本篇文章的Vue源码版本为v2.2.0开发版。 Vue源码的整体架
-
本文向大家介绍vue源码解析之事件机制原理，包括了vue源码解析之事件机制原理的使用技巧和注意事项，需要的朋友参考一下 上一章没什么经验。直接写了组件机制。感觉涉及到的东西非常的多，不是很方便讲。今天看了下vue的关于事件的机制。有一些些体会。写出来。大家一起纠正，分享。源码都是基于最新的Vue.js v2.3.0。下面我们来看看vue中的事件机制： 老样子还是先上一段贯穿全局的代码，常见的事件机
-
在Seata1.3.0版本中，数据源自动代理和手动代理一定不能混合使用，否则会导致多层代理，从而导致以下问题： 单数据源情况下：导致分支事务提交时，undo_log本身也被代理，即为 undo_log 生成了 undo_log， 假设为undo_log2，此时undo_log将被当作分支事务来处理；分支事务回滚时，因为undo_log2生成的有问题，在undo_log对应的事务分支回滚时会将业务表