Vue源码解析+关于组件的data属性+为什么组件内data可以直接this等等(摸索)

2023-11-22 16:48

本文主要是介绍Vue源码解析+关于组件的data属性+为什么组件内data可以直接this等等(摸索),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

疑问1:为什么组件内data为方法而不是一个对象?
疑问2:为什么data就挂在了Vue实例上,用this直接取?

源码

//初始化
function initData(vm: Component) {let data = vm.$options.data    //组件数据data = vm._data = typeof data === 'function'      //放在实例的_data属性上,? getData(data, vm): data || {}.........略过最后...// 通过proxy把data里的值代理到vm对象上proxy(vm, `_data`, key);
}// proxy函数相关的代码
// 定义访问器属性
const sharedPropertyDefinition = {    //.defineProperty的配置enumerable: true,configurable: true,get: noop,set: noop
}function proxy (target: Object, sourceKey: string, key: string) {sharedPropertyDefinition.get = function proxyGetter() {return this[sourceKey][key]; // 即访问 this['_data'][key]}sharedPropertyDefinition.set = function proxySetter(val) {this[sourceKey][key] = val;}	Object.defineProperty(target, key, sharedPropertyDefinition)
}
export function getData (data: Function, vm: Component): any {// #7573 disable dep collection when invoking data getterspushTarget()try {return data.call(vm, vm)    } catch (e) {handleError(e, vm, `data()`)return {}} finally {popTarget()}
}

1:为什么组件内data为方法而不是一个对象?

组件data有一个三元判断为:判断为方法时调用getData,是对象时返回原值,或者判空。
getData:该方法主要执行就是调用data,即data.call(vm, vm),至于为什么传进去vm,不知道!希望有大神告知!

data = vm._data = typeof data === 'function'  ? getData(data, vm): data || {}

组件的数据放在实例的_data属性上。
如果组件的data是一个对象,对象是引用类型。则该组件复用时,注意是该组件复用时会造成混乱。如果采用从方法return出来的方式那就是每次复用都有自己一块独立的内存。

2:为什么data就挂在了Vue实例上,用this直接取?
他是通过proxy(代理)把data里的值代理到vm对象上也就是vue实例上,采用了劫持Object.defineProperty,当获取vue实例上的某个属性时,就代理到_data上。

第一次看到这,有不对的希望指正!!

这篇关于Vue源码解析+关于组件的data属性+为什么组件内data可以直接this等等(摸索)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/411525

相关文章

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次,点赞4次,收藏6次。MyBatis使用#{}作为参数占位符时,会创建预处理语句(PreparedStatement),并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#(井号):MyBATis使用#{}作为参数占位符时,会

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧