vue响应式原理
vue响应式原理
- vue响应式原理
- vue2响应式原理
- 目标对象为数组时
- vue3响应式原理
- Vue3和Vue2在响应式系统方面的对比
- 数据劫持的方式
- 支持数据劫持的数据类型
- Vue3响应式系统显著优点是:
vue响应式原理
无论vue2和vue3响应式都是通过观察者模式(发布订阅模式)实现的
涉及到:目标对象(target),依赖收集(dep),观察者(watcher)
vue2和Vue3的响应式系统同样包含三个阶段,1.数据劫持(变动侦测);2.收集依赖(观察者);3.通知依赖(观察者)。
vue2响应式原理
数据劫持:目标对象通过observe函数,新增__ob__属性,这个属性是一个observer的一个实例,这个observer实例有dep的属性,dep指向的是依赖收集者(自己本身),然后对目标对象每一个属性执行definereactive将属性转换成访问器属性这样我们就可以通过对属性的读写进行拦截

目标对象为数组时
对数组的侦测,首先重写数组的原型为arrayMethods;然后遍历数组,对每一个元素调用observe函数。何为arrayMethods?首先设置arrayMethods的原型为Array.prototype;然后往arrayMethods上定义7个属性,这7个属性其实是重写的7个数组变异方法。有的数组变异方法是可以新增元素的,要把新增加的元素变成响应式的;在所有的变异方法里都会调用数组的__ob__.dep.notify方法通知观察者。示意图如下:

收集依赖:当执行观察者get方法时,会触发目标对象属性的getter方法,在getter方法里收集观察者,这个过程就是“收集观察者”。

通知观察者:当目标对象属性变更时,会触发目标对象的setter方法,在setter方法里执行观察者的update方法
vue3响应式原理
数据劫持:reactive函数,生成Proxy代理对象,可以对5种操作进行拦截。get trap,has trap,ownKeys trap,deleteProperty trap,set trap

收集依赖:Vue3的观察者不叫Watcher,而是叫effect,它是基于ReactiveEffect接口实现的。effect初始化时,执行它的入参fn,fn里执行proxy对象的值,触发get/has/ownKeys trap。在get/has/ownKeys trap 里执行track方法,将目标对象属性和观察者存储到依赖收集表

通知依赖:当proxy对象的值发生改变,触发deleteProperty/set trap。在deleteProperty/set trap 里执行trigger方法,从依赖收集表中找出目标对象属性对应的观察者set集合,遍历所有的观察者,执行run方法,最终会执行effect的入参fn函数。

Vue3和Vue2在响应式系统方面的对比
数据劫持的方式
Vue3的数据劫持是通过Proxy实现的,而Vue2是通过Object.defineProperty实现的;长远来看JS引擎会继续优化Proxy,但Object.defineProperty不会再有针对性的优化,所以Proxy性能上整体优于Object.defineProperty;
总结:Vue3比Vue2有更快的性能。
支持数据劫持的数据类型
Vue3支持Object、Array、Map、WeakMap、Set、WeakSet六种数据类型的数据劫持,而Vue2只支持Object、Array两种数据类型;并且Vue3可以劫持对象的属性增删和数组的索引操作。
总结:Vue3支持更多数据类型的数据劫持。
Vue3响应式系统显著优点是:
有更快的性能、占用更小的内存、支持Vue根数据增删属性的拦截、支持数组的拦截。
相关文章:
vue响应式原理
vue响应式原理 vue响应式原理vue2响应式原理目标对象为数组时 vue3响应式原理Vue3和Vue2在响应式系统方面的对比数据劫持的方式支持数据劫持的数据类型Vue3响应式系统显著优点是: vue响应式原理 无论vue2和vue3响应式都是通过观察者模式(发布订阅模式&a…...
elk安装篇之 Kibana安装
Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的。你可以用kibana搜索、查看存放在Elasticsearch中的数据。是es的可视化客户端之一。 一:下载 https://www.elastic.co/cn/kibana 我的es是elasticsearch-7.10.2版本&#x…...
MySQL 用户授权管理及白名单
1.创建用户 在 MySQL 中,你可以通过以下步骤创建用户并设置白名单: 使用管理员账号连接到 MySQL 服务器。 创建新用户: CREATE USER usernamehostname IDENTIFIED BY password;其中, username 是你要创建的用户名;ho…...
pc-签字画板vue-esign的使用
使用的是vue-esign组件 npm install vue-esign 首先下载组件在main.js中引入vue-esign,并且挂载 import { createApp } from vue; import App from ./App.vue; const app createApp(App);import vueEsign from vue-esign app.use(vueEsign ) 页面使用࿰…...
javaScript:节点操作
目录 前言 常用的节点操作 innerHTML 的两个弊端(补充) createElement(标签名)使用dom方法创建一个元素 父元素.appendChild(子元素) 添加到父元素 注意 指定插入 父元素.insertBefore(要添加的元素,父元素中的指定子元素) 注意&…...
git 忽略已经提交的文件或文件夹 (修改.gitignore文件无效)
场景描述:项目开发到一半,追加了模块,提交的时候未注意将不需要提交的文件或者目录提交到.gitignore,然后提交后发现再修改git配置文件已无法阻拦更新,查阅官方资料: 核心点:.gitignore 之前&a…...
学习左耳听风栏目90天——第十二天 12/90(学习左耳朵耗子的工匠精神,对技术的热爱)【时间管理:同扭曲时间的事儿抗争】
时间管理:同扭曲时间的事儿抗争 要学会说不...
前端如何将后台数组进行等分切割
前端如何切割数组 目标:前端需要做轮播,一屏展示12个,后端返回的数组需要进行切割,将数据以12为一组进行分割 环境:vue3tselement plus 代码如下: function divideArrayIntoEqualParts(array, chunkSiz…...
如何有效防止服务器被攻击?
随着互联网的快速发展,服务器安全问题日益引起人们的关注。近期,全球范围内频繁发生的服务器攻击事件引发了广泛关注。为了保护企业和个人的数据安全,有效防止服务器被攻击已成为迫在眉睫的任务。 首先,及时更新服务器的操作系统和…...
layui表格高度
layui表格的高度设置时使用 height:‘full’ 高度就是表格每个页面的总高度。也可以直接写数值,但是这是定高。 也可以使用 height:“full-数值”,比如 height:full-80 那么就会在表格占据剩余div的时候底部留100px。相当于margin-bottom:10…...
一文1800字从0到1使用Python Flask实战构建Web应用
Python Flask是一个轻量级的Web框架,它简单易用、灵活性高,适用于构建各种规模的Web应用。本文将介绍如何使用Python Flask框架来实战构建一个简单的Web应用,并展示其基本功能和特性。 第一部分:搭建开发环境 在开始之前我们需要…...
【LeetCode-中等题】210. 课程表 II
文章目录 题目方法一:bfs方法二:dfs 题目 这一题是在207题的基础上,要统计拓扑排序的顺序集合,所以只需要在207的基础上加入一个将拓扑排序的节点输出即可(有环无拓扑排序) 【LeetCode-中等题】207. 课程表…...
vue修饰符的用法
Vue修饰符是指在Vue模板中用于改变指令行为的特殊后缀。修饰符以.开头,用于指示指令应该如何绑定或响应事件。Vue修饰符在一些常见的指令中使用,例如v-on和v-model。常见的Vue修饰符包括: .prevent:阻止默认事件的发生。.stop&am…...
汽车3D HMI图形引擎选择
2002年,电影《少数派报告》让观众深入了解未来。 除了情节的核心道德困境之外,大多数人都对它的技术着迷。 我们看到了自动驾驶汽车、个性化广告和用户可以无缝交互的 3D 计算机界面。 令人惊讶的是,虽然故事发生在 2054 年,但许多科幻想象的作品已经成为现实。 对于汽车和…...
stable diffusion实践操作-webUI教程-不是基础-是特例妙用
系列文章目录 stable diffusion实践操作 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、SD webUI是什么?二、详细教程1. 相关插件安装1.1. 提示词插件安装和使用1.2 tagg标签妙用…...
【Java】网络编程
网络编程 Socket套接字概念分类Java数据报套接字通信模型一次发送和接受UDP数据报提供多个客户端的请求处理及响应 Java流套接字通信模型Socket编程注意事项 UDP数据报套接字编程DatagramSocket API构造方法普通方法 DatagramPacket API构造方法普通方法 InetSocketAddress API…...
van-cascader 异步加载
vant官网 异步加载选项 在使用级联选择时当一次性拿到数据量太大时不仅接口慢而且前端渲染页面也会变慢,用户体验很不好,建议使用异步加载选项, 拿到的接口让后端返回一个是否还有下一级的判断,不然van-cascader判断没有childre…...
Golang单元测试举例
1.第一个例子 cal.go package mainfunc addUpper(n int) int {res : 0for i : 1; i < n; i {res i}return res }func getSub(n1 int, n2 int) int {return n1 - n2 }cal_test.go package main//测试文件名必须是_test.go结尾 //测试函数必须Test开头 import ("fmt…...
汽车以太网协议栈
《大师说》栏目上线啦# 《大师说》栏目是怿星科技2023年推出的深度思考栏目,通过邀请内部专家,针对智能汽车行业发展、技术趋势等输出个性化的观点。每期一位大师,每位一个话题,本期由我们怿星的CTO虞胜伟,进行分享。…...
数学建模--二次规划型的求解的Python实现
目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 #二次规划模型 #二次规划我们需要用到函数:Cvxopt.solvers.qp(P,q,G,h,A,b) #首先解决二次规划问题和解决线性规划问题的流程差不多 """ 求解思路如下: 1.针对给定的代求式,转化成标准式…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
