Vue检测数据的原理

Vue能够对用户的数据进行响应式,也就是你在data中写了什么,你在模板中用到data的部分就会渲染成什么,那么Vue是怎么知道用户修改了data中的数据变化并对模板重新进行解析的呢?

在Vue将数据存储为自身的_data之前,Vue会将数据进行处理,主要用到的仍然是数据代理,通过修改一个对象中的属性触发getter和setter进行设置。

如果不清楚数据代理的流程,可以参考这篇文章:https://blog.csdn.net/XunLin233/article/details/133714989

一、Vue监测对象的修改 

我们使用数据代理的方式对p对象中的name属性进行数据代理: 

const p = {name:"张三",age:18
}Object.defineProperty(p, "name", {get() {return p.name;},set(value) {p.name=value;}
})

但是我们按照上面的写法进行数据的读取和修改的时候就会报错:

03.html:18 Uncaught RangeError: Maximum call stack size exceeded 

为什么会产生这个原因呢?

当我们读取name属性时,就会调用get函数,get函数中又读取name属性,又调用get函数...如此无限套娃,就报错了。

 

如何解决上面问题呢?

既然不能通过对象本身去修改属性值,那我们就借助其他的对象来对属性值进行修改,然后返回这个将所有属性修改后的对象,其核心思想就是为每一个对象属性设置getter和setter。

我们可以使用构造函数的this为一个对象中添加属性:

const p = {name:"张三",age:18
}function Observer(obj) {// 获取对象所有的属性名const keys = Object.keys(obj);// 对对象的每个属性进行遍历keys.forEach((k)=>{// 这里的this是Observe对象,所有修改后的属性都添加在了Observe对象身上console.log(this);  // Observer {}Object.defineProperty(this, k, {// 添加getter 和 setterget() {return obj[k];},set(value) {console.log("数据被修改了");obj[k] = value;}})})
}
const newp = new Observer(p);  // 创建Observe对象
console.log(newp);

 

Vue的底层逻辑就是通过上述方法监视数据的修改,但是Vue源码能够监视更深层次的数据修改,如: 对象中存储对象的形式。

二、Vue.$set()

当我们想给一个对象添加新的属性时,我们该怎么做呢?

例如下面的代码,在data中有一个person对象,里面有name和age属性,但是我们想添加再添加一个age属性

当我们在vm._data上的person对象添加sex 时并没有用:

 

如果我们打开vm._data的话,会发现name和age都有get和set,只有sex没有,说明Vue并没有几监视添加的sex对象。 

 Vue提供了 Vue.$set() 方法来进行对象的添加属性:

Vue.$set( 目标对象, 属性名称, 属性值 )

我们使用该方法添加的属性拥有数据代理 

 

在代码中可以直接使用this.$set进行调用 

 

注意:Vue.$set() 不能在data上直接添加属性!

报错:vue.js:5108  [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 

三、Vue检测数组的修改

我们使用v-for遍历一个数组:

现在我们想将数组中下标为0的元素改为“篮球”,但是我们修改过后页面并没有改变 

如果我们输出vm._data 会发现数组中的每一个元素都没有getter和setter,因此Vue不能检测数据的变化。

 

那我们要怎样去改变数组呢?

Vue规定使用如下方法修改数组能够被监测到修改:

push()

pop()

shift()

unshift()

splice()

sort()

reverse() 

要注意的是,上面这些方法是Vue重新包装过的方法,不再是原来Array对象上的方法

Vue的包装过程不仅调用原始Array中的方法,还对页面模板重新进行了解析。 

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

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

相关文章

Unity Ugui 顶点颜色赋值

一、效果图 如下图:图片和文字的颜色都可以渐变,透明度也可以渐变。 原理分析: 不管是图片Image或是文本Text,它们都是网络Mesh来渲染网格是由很多三角形组成,那么我们根据坐标修改三角形的颜色即可实现。 工程源码…

route/router区别/参数

Route (路由): Route(路由)通常指的是一个特定的URL路径,它用于确定应用程序中的某个页面或视图。在前端开发中,路由是指用户在浏览器中输入的 URL 地址,用于访问不同的页面或视图。路由通常包含路由参数&a…

安达发|AI人工智能APS系统:工业4.0的智能引擎

在工业4.0的背景下,人工智能(AI)和APS智能排程软件已经成为智能工厂的标准配置。它们通过集成先进的信息技术、通信技术和物联网技术,实现了生产过程的智能化、自动化和数据化,从而提高了生产效率、降低了生产成本、提…

DIN模型和SIM模型原理与实践

文章目录 1.DIN模型原理缺点 2.SIM模型原理算法步骤1.查找2.注意力机制 参考文献 1.DIN模型 原理 计算用户Last N向量的加权平均权重是候选物品与Last N物品的相似度 缺点 注意力层的计算量正比于n(用户行为序列的长度)只能记录最近的几百个物品&…

Elasticsearch:什么是大语言模型 (LLMs)?

假设你想参加流行的游戏节目 Jeopardy(这是一个美国电视游戏节目,参赛者将获得答案并必须猜测问题)。 要参加演出,你需要了解任何事情的一切。 所以你决定在接下来的三年里每天都花时间阅读互联网上的所有内容。 你很快就会意识到…

chatgpt 接口 和 jupyter版本安装

一 接口代码 有时间继续测试 import openai # 填入你的api_key openai.api_key ""models openai.Model.list()# 定义API参数 params {role: "user", "content": }# 定义循环 while True:# 获取用户输入user_input input("请输入您的消…

Docker基础操作命令演示

Docker中的常见命令,可以参考官方文档:https://docs.docker.com/engine/reference/commandline/cli/ 1、常见命令介绍 其中,比较常见的命令有: 命令说明文档地址docker pull拉取镜像docker pulldocker push推送镜像到DockerReg…

leetcode3. 无重复字符的最长子串 [滑动窗口]

题目 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释:…

设计海报都有哪些好用的软件推荐

在新媒体时代,设计在各个方面都是不可分割的。它最初是设计师的工作,并逐渐成为新媒体编辑的必要技能。 网页内容需要图片和文字,应用程序需要独特的风格基调,人们更喜欢分享视频和图片,而不是简单的文本。因此&#…

数据存储工程解决

在构建大规模爬虫系统时,数据存储是一个至关重要的环节。面对大量数据的处理和存储,我们需要采取一些工程化的解决方案,以确保数据的有效管理和快速检索。在本文中,我将与大家分享一些关于大规模爬虫数据存储的解决方案&#xff0…

为知笔记一个日记模板

<!DOCTYPE HTML><html><head> <meta http-equiv"Content-Type" content"text/html; charsetunicode"> <title>日记&#xff1a;</title><style id"wiz_custom_css">html, .wiz-editor-body {font-siz…

VSInstallsheild 打包的文件 打开文件所在位置为灰

1、现象 如下图所示&#xff1a; 2、原因 Installsheild->Configure The Target System->ShortCuts/folders 自动生成的的 Advertised 3、解决方式 这个不要删&#xff0c;删了有副作用 再加一个同名的快捷键就行 这样后加的覆盖掉前面的就好了 将之前的卸载掉&am…

龙旗科技提交IPO注册:计划募资18亿元,小米为其股东和主要客户

10月13日&#xff0c;上海龙旗科技股份有限公司在上海证券交易所提交注册&#xff0c;提交了招股书&#xff08;注册稿&#xff09;。据贝多财经了解&#xff0c;龙旗科技的于2023年1月预披露招股书&#xff0c;2月28日平移至上海证券交易所递交上市申请&#xff0c;8月23日过会…

行秋找工作的记录

2023-10-17 15:35-16:00 中移&#xff08;苏州&#xff09;研发中心面试 问了项目&#xff0c;还有一些我没准备到的Java八股文&#xff1a;Java类的加载过程&#xff0c;发射机制&#xff0c;redis存储结构&#xff0c;二叉平衡树等。但我也都没回答上来。应该无了。 2023-1…

C# Winform编程(3)对话框

C# Winform编程&#xff08;3&#xff09;对话框 Show(string text);Show(string text, string caption);Show(string text, string caption, MessageBoxButtons buttons);Show(string text, string caption, MessageBoxButtons buttons, MessageBoxIcon icon); using System;…

数据库压力测试方法小结

一、前言 在前面的压力测试过程中&#xff0c;主要关注的是对接口以及服务器硬件性能进行压力测试&#xff0c;评估请求接口和硬件性能对服务的影响。但是对于多数Web应用来说&#xff0c;整个系统的瓶颈在于数据库。 原因很简单&#xff1a;Web应用中的其他因素&#xff0c;例…

Graphviz代码流程图-智慧交通结构图

P1 digraph G {node [shape=box ,style=dashed,color=blue]subgraph cluster_sensors {label="传感器模块"sensors [label="摄像头\n雷达\n车载传感器"]}subgraph cluster_data_processing {label="数据处理模块"data_processing [label="…

PRCV2023-Day1

分会场1 —— 多模态语言大模型 讲习班&#xff1a;多模态语言大模型 讲者&#xff1a;乔宇&#xff08;上海人工智能实验室&#xff09;、周奕毅&#xff08;厦门大学&#xff09;、王兴刚&#xff08;华中科技大学&#xff09; 乔宇、周奕毅和王兴刚三位教授作为本次大会讲…

阿里云优惠券(代金券)免费领取方法及使用教程分享

阿里云优惠券是阿里云提供给用户的一种优惠凭证&#xff0c;通常包括代金券和折扣券&#xff0c;领取之后支付订单时可以抵扣或者打折&#xff0c;是阿里云的一种重要优惠方式。本文将为大家详细介绍阿里云优惠券的免费领取方法及使用教程&#xff0c;帮助大家在购买阿里云产品…

ES6 Map数据结构

1.Map是什么&#xff1f; ES6 提供的另一种新的引用类型的数据结构 它类似于对象&#xff0c;也是键值对的集合&#xff0c;但是“键”的范围不限于字符串&#xff0c;各种类型的值&#xff08;包括对象&#xff09;都可以当作键&#xff09; 以前引用类型中的对象也是键值对…