对vue响应式数据的理解(vue基础,面试,源码级讲解)

首先我们要知道哪些数据可以劫持。 

  1.  是否可以劫持

    • 在JavaScript等动态语言中,字符串和数字虽然是基本数据类型(也称为原始数据类型),但它们可以包装成对象(如String对象和Number对象)进行处理。当它们被包装成对象后,就可以使用对象的方法,包括Object.defineProperty等方法进行数据劫持。
    • 但需要注意的是,对于原始数据类型(未包装成对象时),无法直接应用Object.defineProperty等方法进行劫持。这是因为原始数据类型不是对象,没有属性可以定义或修改。

vue2的简单实现:

(我会在下一篇文章中讲到在vue2中对数组的检测变化)

 讲解:

当定义了一个data数据,首先将数据传入observer方法中,将对象中的每一项键值对取出调用defineReactive方法。

在defineReactive中,递归遍历值,直到数据为基本数据类型。使用Object.defineProperty(原数据,键,{ getset方法 })对数据中的键添加get和set方法,实现数据劫持。

vue3的简单实现:

 讲解:

当定义了一个obj数据,首先将数据传入reactive方法中,在方法中使用Proxy对数据进行劫持,添加getset方法。当数据中的属性每调用时,会执行get方法,从原数据中找到对应的值,判断该值是否为object类型,如果是,再次用Proxy对该值进行数据劫持;如果不是,则返回值。

这种方法,实现了对数据的懒代理,如果我没有去取对象中的数据(结合案例,指obj.n中的值),那么该对象就不会被代理(结合案例,指obj.n)。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试笔记——接口测试

文章目录 一、概念1.接口测试流程2.URL3.HTTP协议4.RESTful5.案例介绍 二、Postman1.Postman软件2.登录接口调试-获取验证码3.登录接口调试-自动关联数据4.合同上传接口-提交请求数据5.提交参数查询6.批量执行7.接口用例设计8.断言8.参数化三、案例1.项目2.课程添加3.课程列表查…

萤石云服务支持云端视频AI自动剪辑生成

萤石视频云存储及媒体处理服务是围绕IoT设备云端存储场景下的音视频采集、媒体管理、视频剪辑和分发能力的一站式、专业云服务,并可面向广大开发者提供复杂设备存储场景下的完整技术方案。目前该服务新增了视频剪辑功能,支持将视频片段在云端进行裁剪并拼…

大数据新视界 --大数据大厂之数据脱敏技术在大数据中的应用与挑战

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

智能取暖桌:以九芯电子NRK3502语音识别芯片提升用户体验

随着科技的不断发展,智能家居市场日益繁荣。智能取暖桌作为其中的一款产品,受到了广大消费者的关注。在智能取暖桌的众多创新中,九芯电子NRK3502语音识别芯片的融入,为用户体验带来了质的飞跃。 首先,NRK3502语音识别芯…

#每日一题#自动化 2024年10月

#每日一题#自动化 2024年10月 1、深拷贝和浅拷贝的区别是什么? 参考答案: 深拷贝是将对象本身复制给另一个对象。这意味着如果对对象的副本进行更改时不会影响原对象。在 Python 中,我们使用 deepcopy()函数进行深拷贝…

Vue3——模板引用

绑定dom组件 defineExpose 可以用来暴露子组件的变量&#xff08;例如 ref 或 reactive&#xff09;和方法。这让父组件可以直接访问子组件的某些状态。 defineExpose 示例 以下是如何通过 defineExpose 暴露变量的示例&#xff1a; <template> <div> <bu…

空间数据分析实验04:空间统计分析

实验概况 实验目的 了解空间统计分析的基本原理掌握空间统计分析的常用方法 实验内容 根据某村的土地利用数据和DEM数据&#xff0c;提取各村组耕地面积比例&#xff0c;并将其与村组平均坡度进行相关性分析&#xff0c;最后计算各村组单元的景观多样性指数。 实验原理与方…

鸿蒙网络编程系列30-断点续传下载文件示例

1. 断点续传简介 在文件的下载中&#xff0c;特别是大文件的下载中&#xff0c;可能会出现各种原因导致的下载暂停情况&#xff0c;如果不做特殊处理&#xff0c;下次还需要从头开始下载&#xff0c;既浪费了时间&#xff0c;又浪费了流量。不过&#xff0c;HTTP协议通过Range…

基于web的酒店客房管理系统【附源码】

基于web的酒店客房管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 用户信息管理 5.2 会员信息管理 5.3 客房信息管理 5.…

k8s系列-Rancher 上操作的k8s容器网络配置总结

Rancher 上操作的k8s容器网络配置总结 要在 Rancher 中配置Spring Boot 应用 ykhd-zhjgyw-xpwfxfjfl 服务&#xff0c;正确的配置方式如下&#xff1a; 1. 应用程序监听端口 在 application.yaml 文件中&#xff0c;配置的应用监听端口是 10001&#xff0c;并且应用的上下文…

【Linux】Shell概念、命令、操作(重定向、管道、变量)

文章目录 一、概念篇1、shell的概念2、shell的分类 二、命令篇1、cat2、echo3、ps4、grep4.1、匹配行首4.2、大小写 5、sed 三、操作篇1、自动补全2、查看历史命令3、命令替换4、重定向4.1、输入重定向4.2、输出重定向4.3、错误重定向 5、管道6、shell中的变量6.1、本地变量6.2…

依赖标签分类任务Smin值计算(蛋白质功能预测,GO标签)

前言 Smin是在蛋白质功能预测中比较流行的一个指标&#xff0c;具体由来我也不甚清楚&#xff0c;只是在最近复现的几篇论文中反复出现了&#xff0c;所以记录一下。 计算方法 &#xff08;图来自于PSPGO论文&#xff09; 其中&#x1d70f;表示阈值&#xff0c;t表示GO标签…

Maven入门到进阶:构建、依赖与插件管理详解

文章目录 一、Maven介绍1、什么是Maven2、Maven的核心功能 二、Maven核心概念1、坐标GAVP1.1、GroupId1.2、ArtifactId1.3、Version1.3.1、版本号的组成 1.4、Packaging 2、POM、父POM和超级POM2.1、POM (Project Object Model)2.1、父POM&#xff08;Parent POM&#xff09;2.…

django连接mysql数据库

存在问题&#xff1a; django如何连接mysql数据库 解决方案&#xff1a; 创建工程和项目APP&#xff1b;修改Django的settings.py文件&#xff08;根据自己的数据库配置信息修改&#xff09;&#xff1b; 并在setting.py文件中添加app DATABASES {default: {# ENGINE: djang…

python 爬虫 入门 二、数据解析(正则、bs4、xpath)

目录 一、待匹配数据获取 二、正则 三、bs4 &#xff08;一&#xff09;、访问属性 &#xff08;二&#xff09;、获取标签的值 &#xff08;三&#xff09;、查询方法 四、xpath 后续&#xff1a;登录和代理 上一节我们已经知道了如何向服务器发送请求以获得数据&#x…

关于SSD1306的OLED的显示的研究

文章目录 函数作用参数解释嵌套函数分析主代码分析逻辑流程总结 难点的解析&#xff1a;生成器的主要逻辑分解&#xff1a;每次生成的元组 (pixel_x, pixel_y, pixel_mask)&#xff1a;生成器的整体流程举例总结 反转后的文本绘制竖直布局有问题的旋转180度旋转坐标轴绘制矩形绘…

SVM(支持向量机)

SVM&#xff08;支持向量机&#xff09; 引言 支持向量机(Support Vector Machine,SVM)&#xff0c;可以用来解答二分类问题。支持向量(Support Vector)&#xff1a;把划分数据的决策边界叫做超平面&#xff0c;点到超平面的距离叫做间隔。在SVM中&#xff0c;距离超平面最近…

【配色网站分享】

个人比较喜欢收藏一些好看的插画、UI设计图和配色&#xff0c;于是有了此篇&#xff0c;推荐一些配色网站&#xff0c;希望能对自己和大家有些帮助。 1.uiGradients 一个主打渐变风网站&#xff0c;还可以直接复制颜色。 左上角的“show all gradients”可以查看一些预设的渐…

upload-labs靶场Pass-02

upload-labs靶场Pass-02 分析源码 $is_upload false; $msg null; if (isset($_POST[submit])) {if (file_exists(UPLOAD_PATH)) {if (($_FILES[upload_file][type] image/jpeg) || ($_FILES[upload_file][type] image/png) || ($_FILES[upload_file][type] image/gif)) …

搭建Golang gRPC环境:protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

参考文章&#xff1a; 安装protoc、protoc-gen-go、protoc-gen-go-grpc-CSDN博客 一、简单介绍 本文开发环境&#xff0c;均为 windows 环境&#xff0c;mac 环境其实也类似 ~ ① 编译proto文件&#xff0c;相关插件 简单介绍&#xff1a; protoc 是编译器&#xff0c;用于将…