vue响应式原理剖析

news2025/3/31 2:35:10

一、什么是响应式?

我们先来看一下响应式意味着什么?我们来看一段代码:

  • m有一个初始化的值,有一段代码使用了这个值;

  • 那么在m有一个新的值时,这段代码可以自动重新执行;

let m = 20
console.log(m)
console.log(m * 2)

m = 40

上面的这样一种可以自动响应数据变量的代码机制,我们就称之为是响应式的。

那么我们再来看一下对象的响应式:

// 对象的响应式
const obj = {
   
  name: "wqx",
  age: 18
}

// 修改obj对象
obj.name = "kobe"
obj.age = 20

二、响应式函数设计

首先,执行的代码中可能不止一行代码,所以我们可以将这些代码放到一个函数中:

  • 那么我们的问题就变成了,当数据发生变化时,自动去执行某一个函数;

在这里插入图片描述

但是有一个问题:在开发中我们是有很多的函数的,我们如何区分一个函数需要响应式,还是不需要响应式呢?

  • 很明显,下面的函数中 foo 需要在obj的name发生变化时,重新执行,做出响应;

  • bar函数是一个完全独立于obj的函数,它不需要执行任何响应式的操作;

const obj = {
   
  name: "wqx",
  age: 18
}

function foo() {
   
  console.log(obj.name)
  console.log(obj.age)
}


function bar() {
   
  console.log(obj.age + 100)
}

三、响应式函数的实现watchFn

但是我们怎么区分呢?

  • 这个时候我们封装一个新的函数watchFn
  • 凡是传入到watchFn的函数,就是需要响应式的;
  • 其他默认定义的函数都是不需要响应式的;
const obj = {
   
  name: "why",
  age: 18
}


// function foo() {
   
//   console.log("foo:", obj.name)
//   console.log("foo", obj.age)
//   console.log("foo function")
// }

// function bar() {
   
//   console.log("bar:", obj.name + " hello")
//   console.log("bar:", obj.age + 10)
//   console.log("bar function")
// }


// 设置一个专门执行响应式函数的一个函数
const reactiveFns = []
function watchFn(fn) {
   
  reactiveFns.push(fn)
  fn()
}

watchFn(function foo() {
   
  console.log("foo:", obj.name)
  console.log("foo", obj.age)
  console.log("foo function")
})


watchFn(function bar() {
   
  console.log("bar:", obj.name + " hello")
  console.log("bar:", obj.age + 10)
  console.log("bar function")
})

// 修改obj的属性
console.log("name发生变化-----------------------")
obj.nam

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

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

相关文章

Element UI实现表格全选、半选

制作如图所示的表格全选、半选&#xff1a; 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…

如何使用动作捕捉系统训练人形机器人

随着人形机器人变得越来越先进&#xff0c;使用动作捕捉系统教会它们如何像人类一样移动成为了人形机器人领域正在研究的全新方向。本文探讨了如何使用Xsens技术捕捉精确的人类运动数据&#xff0c;使机器人能够通过人工智能和机器学习安全高效地学习、适应和执行复杂任务。 近…

内网渗透技术 Docker逃逸技术(提权)研究 CSMSF

目录 如何通过上传的webshell判断当前环境是否是物理环境还是Docker环境 方法一&#xff1a;检查文件系统 方法二&#xff1a;查看进程 方法三&#xff1a;检查网络配置 方法四&#xff1a;检查环境变量 方法五&#xff1a;检查挂载点 总结 2. 如果是Docker环境&#x…

生活电子常识——cmd不能使用anaconda的python环境,导致输入python打开应用商店

前言 电脑已经安装了anaconda,从自带的Anaconda Prompt (Anaconda3)中是可以识别python环境的&#xff0c;然而切换到cmd时&#xff0c;突然发现cmd中无法识别anaconda的python环境&#xff0c;竟然打开了应用商店让我安装Python&#xff0c;这当然是不对的。 解决 这是因为…

如何在linux中部署dns服务 主备dns (详细全过程)

环境centos 7.9 主DNS&#xff1a;192.168.60.131 备DNS&#xff1a;192.168.60.134 我以 chenxingyu0.com 指向 192.168.60.200为例 首先是主dns #!/bin/bash# 检查是否为 root 用户 if [ "$(id -u)" ! "0" ]; thenecho "请使用…

word写latex-Mathtype安装成功-方法

MathType安装报错 想在word写latexMathtype, 网上搜教程安装&#xff0c; 结果一直报错一直删重来&#xff0c; 一直报错一直删了重来 一直报错一直删了重来来来&#xff0c; 就这么反反复复一直不好 网上的教程都是教你不是删mathtype, 就是删office 时代变了啊&#x…

【踩坑日记】springboot 打包后实现类无法找到

试过了所有改什么目录 依赖 clean都以失败告终 最后将实现类的文件名从Impl改成impl宣布成功 记得使用idea自带的重构

deepseek(2)——deepseek 关键技术

1 Multi-Head Latent Attention (MLA) MLA的核心在于通过低秩联合压缩来减少注意力键&#xff08;keys&#xff09;和值&#xff08;values&#xff09;在推理过程中的缓存&#xff0c;从而提高推理效率&#xff1a; c t K V W D K V h t c_t^{KV} W^{DKV}h_t ctKV​WDKVht​…

Linux (Centos7)安装Mongodb4.0.28

一、官网下载安装包上传到服务器系统 官网&#xff1a;https://www.mongodb.com/try/download/community 放在/opt/software目录下&#xff1a; 二、解压至/usr/local目录下&#xff0c;并重新命名为mongodb [rootlocalhost software]# tar -zxvf mongodb-linux-x86_64-rhel7…

数据库设计-笔记4

1.操作词汇简介 insert&#xff1a;用于向表中插入新记录。 delete&#xff1a;用于从表中删除记录。 update&#xff1a;用于修改表中已有的记录。 select&#xff1a;用于从表中检索数据。 2.代码基础(增删改&#xff09; -- 修改表中的信息 -- 修改表名 alter table s…

基于python的图书管理系统设计与实现

摘要 21世纪的今天&#xff0c;随着计算机技术和网络技术的的不断推广发展和应用&#xff0c;图书馆管理方式也应该随之而更新&#xff0c;借由人力进行繁杂重复的图书管理工作已经不再可取&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0…

RAG专栏:向量数据库

一、数据库分类 键值数据库&#xff08;Key-Value&#xff09;&#xff1a;通常用于简单的数据存储&#xff0c;通过键来快速访问数据。文档数据库&#xff08;Document&#xff09;&#xff1a;用于存储文档结构的数据&#xff0c;如 JSON 格式。图数据库&#xff08;Graph&a…

【GPUStack】【dify】【RAGflow】:本地部署GPUStack并集成到dify和RAGflow

目录 Nvidia-Driver CUDA NVIDIA Container Toolkit&#xff08;新版本的docker不用安装&#xff0c;自带&#xff09; Docker 部署GPUStack Text Embeddings 部署模型库模型 测试 部署开源模型&#xff08;modelscope&#xff09; dify 集成 RAGflow集成 Nvidia-Dri…

逼用户升级Win11,微软开始给Win10限速

随着Windows10的支持时间越来越短&#xff0c;微软也加大了对Win10用户的驱赶力度。 最近&#xff0c;微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。 这将影响实时协作和多设备访问。 对OneNote…

HarmonyOs-ArkUI List组件

列表是一个复杂的容器&#xff0c;当列表项达到一定数量&#xff0c;使得列表内容超出其范围的时候&#xff0c;就会自动变为可以滚动。列表适合用来展现同类数据类型。 List组件支持使用&#xff0c;条件渲染&#xff0c;循环渲染&#xff0c;懒加载等渲染控制方式生成子组件…

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码+登录界面】

目录 一、界面全貌展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;摄像头检测 …

鸿蒙生态圈暗战:数字孪生三强争霸谁将主宰消费电子未来?

IDC数据显示&#xff0c;2025年Q1华为以38.7%份额领跑中国折叠屏市场&#xff0c;Pura X首月销量突破120万台。这款搭载HarmonyOS 5的旗舰&#xff0c;通过灵犀通信技术实现5G A网络下载速率提升30%&#xff0c;并在离线环境下完成厘米级导航。其爆款逻辑背后&#xff0c;是鸿蒙…

react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析

一、React 15&#xff08;2016&#xff09; 核心架构&#xff1a;Stack Reconciler&#xff08;栈协调器&#xff09; 工作原理&#xff1a; 同步递归渲染&#xff1a;采用深度优先遍历方式递归处理 Virtual DOM&#xff0c;形成不可中断的调用栈渲染流程&#xff1a;1. 触发 …

CMS迁移中SEO优化整合步骤详解

内容概要 在CMS迁移过程中&#xff0c;系统化的规划与执行是保障SEO排名稳定性的核心。首先需明确迁移流程的关键阶段&#xff0c;包括数据备份、URL适配、元数据同步及安全配置等环节。其中&#xff0c;数据备份不仅需覆盖原始数据库与静态资源&#xff0c;还需验证备份文件的…

数据结构初阶-二叉树链式

目录 1.概念与结构 2.二叉数链式的实现 2.1遍历规则 2.2申请内存空间 2.3手动构建一棵二叉树 2.4二叉树结点的个数 2.5二叉树叶子结点的个数 2.6二叉树第K层结点个数 2.7二叉树的高度 2.8二叉树中查找值为x的结点 2.9二叉树的销毁 3.层序遍历 3.1概念 3.2层序遍历…