vue 代理设置访问图片_详解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源码之数据的代理访问相关推荐

vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
vue的props传数组_详解vue.js之props传递参数
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说 ...
详解LAMP源码编译安装
实战:LAMP源码编译安装家住海边喜欢浪:zhang789.blog.51cto.com 目录详解LAMP源码编译安装 LAMP简介一.准备工作二.编译安装 Apache 三.编译安装 MyS ...
spark RDD详解及源码分析
spark RDD详解及源码分析 @(SPARK)[spark] spark RDD详解及源码分析一基础一什么是RDD 二RDD的适用范围三一些特性四RDD的创建 1由一个已经存在的scala ...
spark 调度模块详解及源码分析
spark 调度模块详解及源码分析 @(SPARK)[spark] spark 调度模块详解及源码分析一概述一三个主要的类 1class DAGScheduler 2trait TaskSched ...
Android应用Context详解及源码解析
[工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处,尊重分享成果] 1 背景今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android ...

vue 代理设置访问图片_详解Vue源码之数据的代理访问

vue 代理设置访问图片_详解Vue源码之数据的代理访问相关推荐

最新文章

热门文章

vue 代理设置 访问图片_详解Vue源码之数据的代理访问

vue 代理设置 访问图片_详解Vue源码之数据的代理访问相关推荐

最新文章

热门文章

vue 代理设置访问图片_详解Vue源码之数据的代理访问

vue 代理设置访问图片_详解Vue源码之数据的代理访问相关推荐