Vue的响应式实现思路及源码分析

news2024/9/24 17:16:27

Vue

# 思路

  1. new Vue() 首先执行初始化,对 data 执行响应化处理,这个过程发生在 Observer
  2. 同时对模板执行编译,找到其中动态绑定的数据,从 data 中获取并初始化视图,这个过程发生在 compile
  3. 同时定义一个 更新函数 和 Watcher,将来对应数据变化时 Watcher 会调用 更新函数
  4. 由于 data 的某个 key 在视图中可以出现多次,所以每个 key 都需要一个管家 Dep 来管理多个 Watcher
  5. 将来 data 中的数据一旦发生变化,会首先找到对应的 Dep ,通知所有 Watcher 执行更新函数

职责划分

  • CVue:框架构造函数
  • Observer:执行数据响应化(分辨数据是对象还是数组)
  • Compile:编译模板,初始化视图,收集依赖(更新函数、wat

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

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

相关文章

python编程——字符串讲解

作者:Insist-- 个人主页:insist--个人主页 本文专栏:python专栏 专栏介绍:本专栏为免费专栏,并且会持续更新python基础知识,欢迎各位订阅关注。 前言 本文将介绍python字符串是什么?以及它的几…

C++11(一)(列表初始化,变量类型推导(auto,decltype),nullptr,范围for循环等)

目录 C11简介 列表初始化 C98中,{}的初始化问题 内置类型的列表初始化 自定义类型的列表初始化 变量类型推导 auto decltype nullptr 范围for循环 final和override 默认成员函数的控制 显式缺省函数 删除默认函数 C11简介 在2003年C标准委员会曾经提交了一份技…

STM32F767-0-HAL库主从定时器产生固定数量的PWM

STM32F767-0-主从定时器产生固定数量的PWM 前言一、配置STM32F767主从定时器的详细步骤1.1 选择主定时器和从定时器:1.2 配置主定时器(主从模式):1.2.1 设置主定时器的时钟源:1.2.2 配置主定时器的分频系数&#xff1a…

不同路径(力扣)动态规划 JAVA

一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。 问总共有多少条不同的路径? 示例 1&a…

JWT的简单说明与使用

简要 JWT是"JSON Web Token"的缩写,是一种用于在不同系统之间传输信息的开放标准。它通过将信息进行加密后生成一个安全的令牌,以便在网络请求中进行身份验证和授权。 具体来说,JWT可以用于以下几个方面: 身份验证&…

CMakeLists.txt 语法介绍

CMake编译原理 CMake是一种跨平台编译工具,主要编写CMakeLists.txt文件,然后用cmake命令将CMakeLists.txt文件转化为make所需要的makefile文件,最后用make命令编译源码生成可执行程序或共享库.因此CMake的编译基本就两个步骤:cmake && make cm…

MySQL基础练习

Ⅰ Ⅱ 3.1 3.2 3.3 3.4 -- 单表查询练习 /* 素材 CREATE TABLE emp ( empno int(4) NOT NULL, ename varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, job varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, …

细数那些Compose新手容易犯的错误

作者:晴天小庭 笔者作为一个日常Jetpack Compose开发者,对Compose的理解也在逐渐加深中,最近回顾当初学习和实践的过程中,犯了不少错误和踩了很多坑,本篇文章作为小总结分享给大家,同时文章会持续更新&…

Leetcode-每日一题【1669.合并两个链表】

题目 给你两个链表 list1 和 list2 ,它们包含的元素分别为 n 个和 m 个。 请你将 list1 中下标从 a 到 b 的全部节点都删除,并将list2 接在被删除节点的位置。 下图中蓝色边和节点展示了操作后的结果: 请你返回结果链表的头指针。 示例 1…

Unity游戏C# dll注入

案例游戏下载 首先在网上下载个游戏案例,我就以Captain Molly游戏为例。 这个游戏玩家默认生命值有5点,咱们通过dll注入修改为10点。 dnSpy 我使用dnSpy来查看Unity游戏生成的dll代码,当然你们也可以使用其他工具。 Unity游戏脚本代码最终…

Codeforces-Round-883-Div-3

Codeforces Round 883 (Div. 3) 链接:https://codeforces.com/contest/1846 A. Rudolph and Cut the Rope There are n n n nails driven into the wall, the i i i-th nail is driven a i a_i ai​ meters above the ground, one end of the b i b_i bi​ m…

Pinia: vue的最新状态管理库

Pinia: vue的最新状态管理库,vuex状态管理工具的替代品。 pinia官方文档 注意defineStore()的返回值还是一个方法,所以useCounterStore是一个方法,执行该方法得到一个对象。 getters: 异步action: storeToRefs: 补充 vuex&#xff…

20中文字符识别(matlab程序)

1.简述 随着计算机科学的飞速发展,以图像为主的多媒体信息迅速成为重要的信息传递媒介,在图像中,文字信息(如新闻标题等字幕) 包含了丰富的高层语义信息,提取出这些文字,对于图像高层语义的理解、索引和检索非常有帮助…

Zero-Shot Node Classification

零样本节点分类(Zero-shot node classification) 谱图卷积 图卷积网络 GCN的分解

pandas中比较两个对象相等性 .eq()函数

在使用pandas做数据分析时,往往我们会有这样的数据需求:为某有某一属性的客户打标签。此刻,.eq()函数,就可以实现它自身的价值。 Lets go,一起去探索它的神秘力量吧! 先讲讲它的用途:可以用于…

银河麒麟高级服务器系统部署-尚文网络xUP楠哥

进Q群11372462领取专属报名福利! # 什么是银河麒麟 银河麒麟高级服务器操作系统是针对企业级关键业务,适应虚拟化、云计算、大数据、工业互联网时代对主机系统可靠性、安全性、性能、扩展性和实时性等需求,依据CMMI5级标准研制的提供内生本质安全、云原…

Pandas理论与实战(一)

目录 一、Series对象 1.1 认识Series对象 1.2 Series对象的索引 1.3 获取Series的索引和值 二、DataFrame对象 2.1 认识DataFrame对象 2.2 DataFrame重要属性和函数 ​三、导入外部数据 3.1 导入.xls或.xlsx文件 3.2 导入csv文件 3.3 导入.txt文本文件 3.4 导入HTML网页…

Sentinel组件限流降级

官网: home | Sentinel 文档不是很全, 关于nacos的配置中心的使用完全没有 常见的限流算法 静态窗口限流: 即规定1秒内只能固定处理多少请求动态窗口限流: 同样是规定1秒内处理多少请求, 但是统计方式与第一个不同, 比如2.5秒则是统计1.5秒到现在的请求数漏桶限流: 进来可以…

【全栈第三课】通过ChatGPT快速入门NodeJS

前言 往期全栈课程: Vue从入门到精通 微信小程序从入门到精通 Node.js基础 简介 Node.js是什么? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。Node.js …