详解Vue源码之数据的代理访问
更新时间：2018年12月11日 17:18:02 作者：被雨水过滤的空气不想说话
这篇文章主要介绍了详解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中,强制刷新组件通常涉及到以下几种方法,本文给大家列出了常见的三种vue强制刷新组件的方法,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
本篇文章主要介绍了详解基于vue-cli优化的webpack配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Vue项目中keepAlive的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
使用vue深度选择器修改ElementUI组件内样式的示例代码
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错，下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue2.0实现导航菜单切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要给大家介绍了关于Vue的组件中data选项为什么必须是函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
本文通过实例代码给大家介绍Vue IP地址输入框实现,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了Vue 利用指令实现禁止反复发送请求的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Vue 2.0学习笔记之使用$refs访问Vue中的DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论