Vue3学习——响应式原理

vue2原理

  • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
  • 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
问题:
新增属性、删除属性, 界面不会更新。
直接通过下标修改数组, 界面不会自动更新。

vue3原理

  • 实现原理:
    • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
    • 通过Reflect(反射): 对源对象的属性进行操作。
new Proxy(data, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}})

自我理解:

Proxy:相当于拦截每一个属性,去对属性进行一系列增删改查操作。他还拥有新增、删除属性功能
Reflect:在vue2中同一属性修改两次会报错,而Reflect则不会,按照第一次修改赋值,同时return时也会告诉你是否成功当前操作。

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

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

相关文章

文件 IO 2月18日学习笔记

标准IO和文件IO的区别: 1.标准IO是库函数,是对系统调用的封装 2.文件IO是系统调用,是Linux内核中的函数接口 3.标准IO是有缓存的 4.文件IO是没有缓存的 文件IO: 1.操作步骤: 打开 -> 读/写 -> 关闭 2.打开文…

多线程、分布式运行用例

python多线程 threading模块 多线程实例 # -*- coding: utf-8 -*- # Time : 2024/2/7 15:50 # Author : 居里夫人吃橘子 # File : class01.py # Software: PyCharm import threading from time import sleepdef run(name):print(name 该起床了)sleep(2)print(name …

Linux CentOS系统安装SQL Server并结合内网穿透实现公网访问本地数据

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

Ubuntu在终端编辑完配置文件怎么保存退出?

1.退出,按【Ctrlx】,回车键。 2.保存,则先按【Ctrlo】,回车键,再按【Ctrlx】退出

小白水平理解面试经典题目LeetCode 1025 Divisor Game【动态规划】

1025 除数游戏 小艾 和 小鲍 轮流玩游戏&#xff0c;小艾首先开始。 最初&#xff0c;黑板上有一个数字 n 。在每个玩家的回合中&#xff0c;该玩家做出的动作包括&#xff1a; 选择任意 x&#xff0c;使 0 < x < n 和 n % x 0 。将黑板上的数字 n 替换为 n - x 。 此…

Dom节点继承树基本操作

遍历节点树 基于元素节点树的遍历 parcntElcrmcnt -> 返回当前元素的父元秦节点 (IE不兼容)children ->只返回当前元素的元素子节点node.childFlement(ount nodechildren.length当前元素节点的子元素(IE不兼容)firstElementChild->返回的是第一个元素节点(IE不兼容)l…

IDEA-常用插件

1、Mybatis Log Free 当我们使用mybatis log在控制台输出sql 内容&#xff0c;输出内容将语句与参数分开打印&#xff0c;还需要手动将参数替换到指定位置。 使用对应插件后&#xff0c;自动将输出内容组装成完整的可直接执行的SQL 在插件市场 查看对应名称&#xff0c;并安装。…

【数据结构】图的存储与遍历

图的概念 图是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G (V&#xff0c; E) 图分为有向图和无向图 在有向图中&#xff0c;顶点对<x, y>是有序的&#xff0c;顶点对<x&#xff0c;y>称为顶点x到顶点y的一条边(弧)&#xff0c;<x, y>和&l…

基于微信小程序的校园跑腿系统的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

轻松入门MySQL:优化复杂查询,使用临时表简化数据库查询流程(13)

在进销存管理系统中&#xff0c;复杂的数据查询是司空见惯的。这些查询往往需要处理大量的数据&#xff0c;并执行复杂的逻辑操作。然而&#xff0c;处理这些查询可能会变得非常耗时&#xff0c;并且难以维护。为了解决这个问题&#xff0c;我们可以利用临时表&#xff0c;这是…

IDEA无法下载源代码(Maven无法下载源代码)

问题 这两天在突击SpringBoot&#xff0c;按ctrl打开一个SpringBoot的类想要下载源代码&#xff0c;居然下载不了&#xff0c;右下角弹窗提示无法下载源代码 百度查了查&#xff0c;在本地仓库里下载失败的目录下有个.lastUpdate的文件记录了一些信息 #NOTE: This is a Maven…

CNC加工:不只是魔法,还是科技与艺术的完美融合!

前言 亲爱的朋友们&#xff0c;你们好&#xff01;我是香蕉&#xff01;今天我将带你们一起走进CNC加工的世界&#xff0c;这是一个充满创意、精确无比、甚至有点神秘的领域。准备好跟我一起探索这个科技与艺术的交汇点了吗&#xff1f; 一、CNC加工&#xff1a;不只是名字酷…

算法沉淀——BFS 解决最短路问题(leetcode真题剖析)

算法沉淀——BFS 解决最短路问题&#xff08;leetcode真题剖析&#xff09; 01.迷宫中离入口最近的出口02.最小基因变化03.单词接龙04.为高尔夫比赛砍树 BFS&#xff08;广度优先搜索&#xff09;是解决最短路径问题的一种常见算法。在这种情况下&#xff0c;我们通常使用BFS来…

Chatgpt自媒体标题调教案例

第一步:给身份 下面我需要你扮演一名专业的小红书标题党专家,我会以“请学习”为开头传授你一些给小红书 取标题的技巧,如果你学会了,就跟我回复“学会了”。(给予学习的设定) 在我给你传授完技巧后,我会以“请根据以下内容帮我取个标题:”为开头,给你一份我要在小 红书…

特征提取匹配方案不止SuperPoint

局部特征匹配在计算机视觉领域广泛应用&#xff0c;涵盖图像检索、3D重建和目标识别等领域。然而&#xff0c;由于视点和光照变化等因素&#xff0c;改进匹配的准确性和鲁棒性仍然面临挑战。近年来&#xff0c;深度学习模型的引入引发了对局部特征匹配技术的广泛探索。这些方法…

前端架构: 脚手架框架之yargs高级应用教程

脚手架框架之yargs高级应用 1 &#xff09;高级应用概述 现在还用 xyzcli 这个脚手架&#xff0c;继续在这个项目中来看yargs的高级用法在 yargs 文档中, 给出了复杂应用的方式&#xff0c;这里做下详解 https://www.npmjs.com/package/yargs?activeTabreadme#complex-exampl…

19.Swift属性

Swift 属性 在 Swift 中&#xff0c;属性是类、结构体和枚举中的特征&#xff0c;用于存储值或提供计算值。Swift 中的属性可以分为存储属性&#xff08;Stored Properties&#xff09;和计算属性&#xff08;Computed Properties&#xff09;两种类型。 存储属性&#xff08…

莱卡云怎么样?简单测评下莱卡云韩国CN2云服务器

莱卡云服务器厂商&#xff0c;国内持证企业服务器商家&#xff0c;运作着香港、美国、韩国、镇江、日本、绍兴、枣庄、等数据中心的云服务器、独立服务器出租、设备托管、CDN等业务。今天为大家带来的是莱卡云韩国CN2服务器的详细评测&#xff0c;该云服务器的数据中心位于韩国…

外汇天眼:Monex计划重新任命八位现任董事,并任命三位新董事

Monex Group, Inc. 今日宣布&#xff0c;公司的提名委员会已决定在2024年6月举行的第20届股东年度大会上提议任命多位候选人加入董事会。 尽管公司认为现任董事熟悉其业务&#xff0c;因此目前尚不是替换他们的时机&#xff0c;但鉴于运营环境的显著变化和管理决策日益困难&…

显微测量|共聚焦显微镜大倾角超清纳米三维显微成像

用于材料科学领域的共聚焦显微镜&#xff0c;基于光学共轭共焦原理&#xff0c;其超高的空间分辨率和三维成像能力&#xff0c;提供了全新的视角和解决方案。 工作原理 共聚焦显微镜通过在样品的焦点处聚焦激光束&#xff0c;在样品表面进行快速点扫描并逐层获取不同高度处清…