Vue源码系列讲解——变化侦测篇【上】(何为变化侦测)

目录

1. 前言

2.什么是变化侦测

3.总结


1. 前言

众所周知,Vue最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢?在这里,我们可以把数据理解为状态,而视图就是用户可直观看到页面。页面不可能是一成不变的,它应该是动态变化的,而它的变化也不应该是无迹可寻的,它或者是由用户操作引起的,亦或者是由后端数据变化引起的,不管它是因为什么引起的,我们统称为它的状态变了,它由前一个状态变到了后一个状态,页面也就应该随之而变化,所以我们就可以得到如下一个公式:

UI = render(state)

上述公式中:状态state是输入,页面UI输出,状态输入一旦变化了,页面输出也随之而变化。我们把这种特性称之为数据驱动视图。

OK,有了基本概念以后,我们再把上述公式拆成三部分:staterender()以及UI。我们知道stateUI都是用户定的,而不变的是这个render()。所以Vue就扮演了render()这个角色,当Vue发现state变化之后,经过一系列加工,最终将变化反应在UI上。

那么第一个问题来了,Vue怎么知道state变化了呢?

2.什么是变化侦测

Vue是怎么知道state变化了呢?换句话说,数据变化了是怎么通知给Vue呢?那么,这就引出了Vue中的变化侦测。

变化侦测就是追踪状态,亦或者说是数据的变化,一旦发生了变化,就要去更新视图。

变化侦测可不是个新名词,它在目前的前端三大框架中均有涉及。在Angular中是通过脏值检查流程来实现变化侦测;在React是通过对比虚拟DOM来实现变化侦测,而在Vue中也有自己的一套变化侦测实现机制。

那么,接下来我们就通过阅读源码来学习一下Vue是怎么实现自己的对数据变化进行侦测的机制。

3.总结

首先,我们知道了什么是数据驱动视图。数据驱动视图简单来说就是数据变化引起视图变化,那么第一步就是先要知道数据什么时候发生变化,也就是说对数据的变化要进行侦测。

其次,数据的变化侦测在三大框架中均有涉及,不同的框架有着自己的一套侦测机制。

最后,我们从源码出发,学习在Vue中是如何对数据进行变化侦测的。

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

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

相关文章

前端JavaScript篇之强类型语言和弱类型语言的区别和对比

目录 强类型语言和弱类型语言的区别和对比总结 强类型语言和弱类型语言的区别和对比 强类型语言和弱类型语言是编程语言的两种不同类型系统,它们处理变量类型的方式有所不同。 强类型语言: 强类型语言要求在使用变量之前必须明确声明其类型,…

dolphinscheduler海豚调度(一)简介快速体验

1、简介 Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统。适用于企业级场景,提供了一个可视化操作任务、工作流和全生命周期数据处理过程的解决方案。 Apache DolphinScheduler 旨在解决复杂的大数据任务依赖关系,并为应…

手把手教你激活BetterZip for Mac免费下载(附注册码) v5.3.4

软件介绍 BetterZip for Mac是一款广受欢迎的文件解压缩工具,支持Mac以及Windows等多个平台,能够生成被Win和Mac支持的压缩包,让用户可以在Mac和Windows电脑之间使用一种通用压缩包,用户可以更快捷地向压缩文件中添加和删除文件&…

暴雨讲堂| 发展数字经济 促进数实融合

数字经济呈现出以数字技术为发展驱动力、以数据要素为核心生产要素、以平台为主要组织形式的新特征。 数据、算法、算力是数字经济时代的重要推动力。 算法和算力是充分挖掘数据价值的必要支撑。大数据和人工智能的应用不仅体现在生产端、渠道端,在科技的生产中也…

相机图像质量研究(9)常见问题总结:光学结构对成像的影响--工厂镜头组装

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…

Linux(三)--文件系统

Linux命令简介 [rootlocalhost ~]# 表示 Linux 系统的命令提示符。 []:这是提示符的分隔符号,没有特殊含义。 root:显示的是当前的登录用户,笔者现在使用的是 root 用户登录。 :分隔符号,没有特殊含义。 l…

c++阶梯之类与对象(中)< 续集 >

前文: c阶梯之类与对象(上)-CSDN博客 c阶梯之类与对象(中)-CSDN博客 前言: 在上文中,我们学习了类的六个默认成员函数之构造,析构与拷贝构造函数,接下来我们来看看剩下…

hbuiderX打包为apk后无法停止录音的解决方案

同一个APP在hbuilder和hbuilderX打包&#xff0c;出现没有麦克风权限 - DCloud问答 第一步&#xff1a; 在manifest.json的“模块权限配置”中勾选以下权限&#xff1a; <uses-permission android:name"android.permission.MODIFY_AUDIO_SETTINGS" /> <use…

【OpenVINO™】在 MacOS 上使用 OpenVINO™ C# API 部署 Yolov5 (下篇)

在 MacOS 上使用 OpenVINO™ C# API 部署 Yolov5 &#xff08;下篇&#xff09; 项目介绍 YOLOv5 是革命性的 "单阶段"对象检测模型的第五次迭代&#xff0c;旨在实时提供高速、高精度的结果&#xff0c;是世界上最受欢迎的视觉人工智能模型&#xff0c;代表了Ult…

Spring Boot RestTemplate请求证书问题

Spring Boot RestTemplate请求证书问题 场景报错描述原因解决补充赶紧跑路&#xff01; 场景 GG&#xff01;忙活了一个月的需求正式上线&#xff0c;第一天就嗷嗷报错&#xff0c;没一条数据是请求成功的。因为程序里插入了监控程序&#xff0c;监控程序报错&#xff0c;毕竟…

前端异步相关知识总结

目录 一、同步和异步简介 同步&#xff08;按顺序执行&#xff09; 异步&#xff08;不按顺序执行&#xff09; 异步出现的原因和需求 二、实现异步的方法 回调函数 Promise 生成器Generators/ yield async await 三、promise和 async await 区别 概念 两者的区别 …

政安晨:示例演绎TensorFlow的官方指南(一){基础知识}

为什么要示例演绎&#xff1f; 既然有了官方指南&#xff0c;咱们在官方指南上看看就可以了&#xff0c;为什么还要写示例演绎的文章呢&#xff1f; 其实对于初步了解TensorFlow的小伙伴们而言&#xff0c;示例演绎才是最重要的。 官方文档已经假定了您已经具备了相当合适的…

19. AUTOSAR网络管理系统(二)

目录 1.AUTOSAR网络管理系统 1.1 NM系统概述 1.2 CanNM状态机分析 2.小结 1.AUTOSAR网络管理系统 1.1 NM系统概述 经过上面宏观的分析,我们知道通过整车ECU的唤醒是多种多样的,因此抽象出一个模块来统一管理和协调不同总线(CAN、FlexRay等),对于软件分层解耦是十分有必…

简单指针运算c语言

#include <stdio.h> #include <stdlib.h> int main() { // 指针运算 int i 1; int *p &i; printf("Value of i: %d\n", i); printf("Value of p: %p\n", (void*)p ); printf("Value of p 1: %p\n"…

政安晨:机器学习快速入门(四){pandas与scikit-learn} {随机森林}

咱们将在这篇文章中使用更复杂的机器学习算法。 随机森林 基本定义 随机森林(Random Forest)是一种机器学习算法&#xff0c;属于集成学习(ensemble learning)的一种。它是通过构建多个决策树&#xff08;即森林&#xff09;来进行预测和分类的。 随机森林的主要特点是采用了…

新能源光伏发电设计全面解析

伴随碳达峰、碳中和“双碳”政策大力推行&#xff0c;以及新能源市场的利好&#xff0c;目前多个城市在大力推进光伏发电项目&#xff0c;本篇文章将详细介绍关于光伏发电设计的信息。 一、光伏发电概念 光伏发电是指利用太阳辐射能在太阳能电池板上产生的电能&#xff0c;通…

HTTP2: springboot启用http2

springboot http2应用条件 使用servlet 4.0jdk 9tomcat 9 springboot 开启h2 创建证书 创建脚本&#xff1a; keytool -genkey -keyalg RSA -alias wisely -keystore keystore.jks -storepass pass1234 -validity 4000 -keysize 2048添加springboot配置 server:port: 808…

react+antd+CheckableTag实现Tag标签单选或多选功能

1、效果如下图 实现tag标签单选或多选功能 2、环境准备 1、react18 2、antd 4 3、功能实现 原理: 封装一个受控组件&#xff0c;接受父组件的参数&#xff0c;数据发现变化后&#xff0c;回传给父组件 1、首先&#xff0c;引入CheckableTag组件和useEffect, useMemo, use…

springboot Feign方式注入注解详解

一、FeignClient注解详解 FeignClient是Spring Cloud中用于声明Feign客户端的注解&#xff0c;它使得编写HTTP客户端变得更简单。通过Feign的自动化配置机制&#xff0c;可以很容易地编写HTTP API客户端。以下是FeignClient的详解&#xff1a; 作用&#xff1a;FeignClient注解…

代码随想录算法训练营DAY15 | 二叉树 (2)

一、LeetCode 102 二叉树的层序遍历 题目链接&#xff1a; 102.二叉树的层序遍历https://leetcode.cn/problems/binary-tree-level-order-traversal/ 思路&#xff1a;利用队列的先进先出特性&#xff0c;在处理本层节点的同时将下层节点入队&#xff0c;每次处理一层的节点&…