Vue.set 方法原理

function set(target, key, value) {// 判断是否是数组,并且 key 是一个有效的索引值if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)target.splice(key, 1, value)return value}// 判断 key 是否已经存在于 target 中if (key in target && !(key in Object.prototype)) {target[key] = valuereturn value}// 获取 target 的响应式对象const ob = target.__ob__// 判断 target 是否是响应式对象if (target._isVue || (ob && ob.vmCount)) {// 非生产环境下发出警告,不能给 Vue 实例或根数据对象添加新的 property// 因为 Vue 实例是代理了根数据对象,并且 Vue.set 无法触发视图更新console.warn('Avoid adding reactive properties to a Vue instance or its root $data ' +'at runtime - declare it upfront in the data option.')return value}// 如果 target 不是响应式对象,直接将 key 和 value 添加到 target 中if (!ob) {target[key] = valuereturn value}// 将 key 添加到 target 中,并将 key 设置为响应式defineReactive(ob.value, key, value)ob.dep.notify()return value
}

上述代码中首先判断了 target 是否是数组,并且 key 是一个有效的索引值,如果满足条件,则使用 splice 方法将 value 添加到 target 中。

接着判断了 key 是否已经存在于 target 中,如果存在,则直接更新 target[key] 的值。

然后判断了 target 是否是 Vue 实例或根数据对象,如果是,则发出警告,不能给 Vue 实例或根数据对象添加新的 property。

最后判断了 target 是否是响应式对象,如果是,则使用 defineReactive 方法将 key 添加到 target 中,并将 key 设置为响应式。

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

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

相关文章

JS常见正则表达式写法(附案例)

正则表达式方法示例: 1. test方法解析,test判断正则是否在字符串中出现过,如果出现返回true,如果没出现返回false。 let str hello world; let ret1 /e/.test(str); // true let ret2 /q/.test(str); // false 如&…

Pytorch的讲解及实战·MNIST数据集手写数字识别

目录 一、前言与pytorch的下载 1、前言 2、下载pytorch ①创建虚拟环境 ②下载pytorch(cpu版) ③测试pytorch是否下载成功 ④使用jupyter notebook 但是使用不了torch的解决方法 二、pytorch的使用 1、Tensor的数据类型 ①torch.FloatTensor …

【nw.js】使用nw.js将html页面打包成exe免安装程序

文章目录 一、批处理zip命令(已有可跳过此步骤)二、nw.js包三、使用批处理命令打包成exe可执行文件四、使用EnigmaVB打包成免安装可独立运行的exe文件五、结束 一、批处理zip命令(已有可跳过此步骤) 下载zip,你可以到该…

maven依赖无法传递问题排查

一、背景 在A模块中引入B模块,C服务引入A模块但是B模块没有传递进来。 二、排查 使用mvn clean install -Dmaven.test.skiptrue查看打包日志信息,通过搜索A模块名称,出现如下警告信息: [WARING] The POM for A:jar:0.0.1-SNAP…

HarmonyView: Harmonizing Consistency and Diversity in One-Image-to-3D

Q: 这篇论文试图解决什么问题? A: 这篇论文试图解决单张图像到3D内容生成中的一致性和多样性之间的平衡问题。具体来说,论文提出了一个名为HarmonyView的方法,它通过分解一致性和多样性这两个方面来生成既具有视觉一致性又具有多样性的3D内容…

ROS无人机初始化GPS定位漂移误差,确保无人机稳定飞行

引言: 由于GPS在室外漂移的误差比较大,在长时间静止后启动,程序发布的位置可能已经和预期的位置相差较大,导致无法完成任务,尤其是气压计的数据不准,可能会导致无人机不能起飞或者一飞冲天。本文主要是在进…

53.网游逆向分析与插件开发-游戏反调试功能的实现-通过内核信息检测调试器

码云地址(master分支):https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号:b44fddef016fc1587eda40ca7f112f02a8289504 代码下载地址,在 SRO_EX 目录下,文件名为:SRO_Ex-通过内核信息…

ceph集群搭建到应用从入门到熟练,包含块存储、对象存储、cephfs的应用、cephx认证等

ceph-deploy比较适合生产环境,不是用cephadm搭建。相对麻烦一些,但是并不难,细节把握好就行,只是命令多一些而已。 ceph理论知识 略… ceph集群实验环境 服务器主机public网段IP(对外服务)cluster网段I…

取出一个时间序列中每一个元素里的日期Series.dt.date()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 取出一个时间序列中 每一个元素里的年月日 Series.dt.date [太阳]选择题 以下代码的输出结果中正确的是? import pandas as pd t pd.Series(pd.date_range("2023-12-28", periods4…

OpenCV中使用Mask R-CNN实现图像分割的原理与技术实现方案

本文详细介绍了在OpenCV中利用Mask R-CNN实现图像分割的原理和技术实现方案。Mask R-CNN是一种先进的深度学习模型,通过结合区域提议网络(Region Proposal Network)和全卷积网络(Fully Convolutional Network)&#xf…

Java企业电子招投标系统源代码,支持二次开发,采用Spring cloud框架

在数字化采购领域,企业需要一个高效、透明和规范的管理系统。通过采用Spring Cloud、Spring Boot2、Mybatis等先进技术,我们打造了全过程数字化采购管理平台。该平台具备内外协同的能力,通过待办消息、招标公告、中标公告和信息发布等功能模块…

饥荒Mod 开发(二四):制作一把万能工具

饥荒Mod 开发(二三):显示物品栏详细信息 饥荒Mod 开发(二五):常用组件 总结 源码 饥荒中的每种工具都有独特的功能,比如 斧头用来砍树, 铲子用来 挖东西,鹤嘴锄用来挖矿, 锤子可以敲碎东西,所以…

2013年第二届数学建模国际赛小美赛A题数学与经济灾难解题全过程文档及程序

2013年第二届数学建模国际赛小美赛 A题 数学与经济灾难 原题再现: 2008年的市场崩盘使世界陷入经济衰退,目前世界经济仍处于低迷状态,其原因是多方面的。其中之一是数学。   当然,并非只有金融界依赖于并非总是可靠的数学模型…

编程艺术C代码学习注释

一、左旋转字符串 详情见文章参考&#xff1a; github:程序员编程艺术csdn:程序员编程艺术第一章 1.暴力移位 void leftShift1(char * arr, int n) //n位移动的位数 {size_t tmpLen strlen(arr);char tmpChar;int i, j;if (n > 0){for (i 0; i < n; i){tmpChar …

postman使用-03发送请求

文章目录 请求1.新建请求2.选择请求方式3.填写请求URL4.填写请求参数get请求参数在params中填写&#xff08;填完后在url中会自动显示&#xff09;post请求参数在body中填写&#xff0c;根据接口文档请求头里面的content-type选择body中的数据类型post请求参数为json-选择raw-选…

Flask 与微信小程序对接

Flask 与微信小程序的对接 在 web/controllers/api中增建py文件&#xff0c;主要是给微信小程序使用的。 web/controllers/init.py # -*- coding: utf-8 -*- from flask import Blueprint route_api Blueprint( api_page,__name__ )route_api.route("/") def ind…

软件测试/测试开发丨Pytest测试用例生命周期管理-Fixture

1、Fixture 用法 Fixture 特点及优势 1&#xff64;命令灵活&#xff1a;对于 setup,teardown,可以不起这两个名字2&#xff64;数据共享&#xff1a;在 conftest.py 配置⾥写⽅法可以实现数据共享&#xff0c;不需要 import 导⼊。可以跨⽂件共享3&#xff64;scope 的层次及…

Linux内核中断

Linux内核中断 ARM里当按下按键的时候&#xff0c;他首先会执行汇编文件start.s里面的异常向量表里面的irq,在irq里面进行一些操作。 再跳转到C的do_irq(); 进行操作&#xff1a;1&#xff09;判断中断的序号&#xff1b;2&#xff09;处理中断&#xff1b;3&#xff09;清除中…

2024美赛数学建模思路A题B题C题D题E题F题思路汇总 选题分析

文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间&#xff1a;北京时间2024年2月2日&#xff08;周五&#xff…

模型部署之——ONNX模型转RKNN

提示&#xff1a;这里可以添加学习目标 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、加载Docker镜像二、转换脚本 一、加载Docker镜像 加载rknn官方提供的基于x86架构下模型转换的镜像文件&#xff0c;生成…