深入理解vue相关的底层原理

keep-alive 组件的作用及原理

keep-alive 是 Vue 提供的一个内置组件,在组件切换过程中将状态保留在内存中,防止重复渲染 DOM。

如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁:

  • 组件被换掉时,会被缓存到内存中,触发 deactivated 生命周期
  • 当组件被切回来时,再去缓存里找这个组件,触发activated钩子函数

原理:Vue内部将DOM节点抽象成了一个个的VNode 节点,keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件(pruneCache 与 pruneCache)的组件在 cache 对象中缓存起来,在需要重新渲染的时候再将 VNode 节点从 cache 对象中取出并渲染。

Vue 是如何实现数据双向绑定的

可以实现双向绑定的方法有很多,KnockoutJS 基于观察者模式的双向绑定,Ember 基于数据模型的双向绑定,Angular 基于脏检查的双向绑定,Vue 是基于数据劫持的双向绑定。

基于数据劫持的双向绑定离不开 Proxy 与 Object.defineProperty 等方法对对象/对象属性的劫持,我们要实现一个完整的双向绑定需要以下几个要点:

  1. 利用 Proxy 或 Object.defineProperty 生成的 Observer 针对对象/对象的属性进行「劫持」,在数据变更的时候通知 Watcher 因为属性可能是多个,所以会有多个订阅者,故我们需要一个消息订阅器 Dep 来专门收集这些订阅者,并在监听器 Observer 和订阅者 Watcher 之间进行统一的管理
  2. 解析器 Compile 解析模板中的 Directive(指令),收集指令所依赖的方法和数据,替换模板数据,将相关指令初始化成一个订阅者 Watcher,等待数据变化然后进行渲染
  3. Watcher 属于 Observer 和 Compile 桥梁,它将接收到的 Observer 产生的数据变化,并根据 Compile 提供的指令进行视图渲染,使得数据变化驱动视图变化

利用 Object.defineProperty 劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在 Vue3.0 中通过 Proxy 对象进行类似的操作。

Proxy 相比于 defineProperty 的优势

Object.defineProperty 的优势:兼容性好,支持 IE9+

Object.defineProperty 缺陷:

  1. 对普通对象的监听需要遍历每一个属性
  2. 无法监听数组的变动
  3. 无法监听 Map/Set 数据结构的变动
  4. 无法对对象新增/删除的属性进行监听

Proxy 优势如下:

  • Proxy 可以直接监听对象而非属性
  • Proxy 可以直接监听数组的变化
  • Proxy 有多达 13 中拦截方式,不限于 apply, ownKeys, deleteProperty, has 等等是 Object.defineProperty 不具备的
  • Proxy 返回的是一个新对象,可以只操作新对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改
  • Proxy 作为新标准将收到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利

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

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

相关文章

代码随想录算法训练营Day38|动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

目录 动态规划理论基础 什么是动态规划 动态规划的解题步骤 动态规划的debug 509. 斐波那契数 前言 思路 算法实现 方法一:动态规划 方法二:递归法 70. 爬楼梯 前言 思路 算法实现 拓展 746. 使用最小花费爬楼梯 算法实现 总结 动态规划…

2024年新提出的算法:(凤头豪猪优化器)冠豪猪优化算法Crested Porcupine Optimizer(附Matlab代码)

本次介绍一种新的自然启发式元启发式算法——凤头豪猪优化器(Crested Porcupine Optimizer,CPO)。该成果于2024年1月发表在中科院1区SCI top期刊Knowledge-Based Systems(IF 8.8)上。 1、简介 受到凤头豪猪(CP)各种…

iOS 自动打包如何配置配置打包证书和profile provision文件【脚本方式配置】

iOS 最新Jenkins自动化打包总结 本文主要内容: 1.Xcode和Jenkins的相关设置,以及环境切换 2.通过shell脚本将证书和描述文件拷贝到自动化打包的机器,并archive导出ipa包 3.上传到蒲公英 4.解决Swift不支持use_frameworks!的问题 开搞&…

【开源】SpringBoot框架开发天然气工程业务管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…

[Grafana]ES数据源Alert告警发送

简单的记录一下使用es作为数据源,如何在发送告警是带上相关字段 目录 前言 一、邮件配置 二、配置 1.Query 2.Alerts 总结 前言 ES作为数据源,算是Grafana中比较常见的,Alerts告警是我近期刚接触,有一个需求是当表空间大于…

如何使用ssh key免密码登录服务器?

以下是使用密钥对免密码登录服务器的具体指令操作步骤: 步骤一:生成密钥对 在本地电脑上打开终端或命令提示符,运行以下命令生成密钥对: ssh-keygen -t rsa -C "your_emailexample.com" 该命令会提示您选择保存密钥…

flutter实现:使用三方组件syncfusion_flutter_datagrid

Syncfusion Flutter DataGrid 是一个用于 Flutter 的数据网格组件,它提供了丰富的功能来显示和编辑数据。这个组件提供了灵活的配置选项,使得开发者能够根据需要定制数据的显示和编辑方式。 项目中有两个需求,一是在列表中要使用可变高度&am…

OpenCV 5 - 图像混合处理addWeighted()

图像混合 1 理论-线性混合操作 其中α的取值范围为0~1之间,表示图像的所占的权重 2 混合处理函数addWeighted() 3 代码示例 Mat src1, src2, dst;src1 imread("./1.png");src2 imread("./2.png");if (!src1.data && src2.empty()) //判断图片是…

Flutter WebView之给H5网页图片添加点击事件以实现原生图片预览

Flutter WebView之给H5网页图片添加点击事件以实现原生图片预览 前言环境及插件代码实现参考前言 网上很多方案,都是获取html中的图片列表,再往里面添加点击事件。 思路是没错的,但是由于很多H5使用的VUE或者Ajax等技术异步加载渲染,因此此处需要借助jQuery库给一步渲染的…

微信小程序canvas画布实现椭圆元素自由缩放、移动功能

目录 实现效果 ​编辑 一、获取画布信息并绘制背景 二、绘制椭圆

《微信小程序开发从入门到实战》学习九十七

7.3 表单组件 7.3.1 picke-view与picker-view-column组件 一个picker-view-column代表 一个滚动选择器子项,一个picker-view组件可以包含多个picker-view-column组件,这样可以一次性选择多项内容如年、月、日等。 picker-view-column组件中需包含多个…

云安全中的常见云漏洞和威胁,有哪些防范措施

随着企业在数字化时代的脚步中愈发倚重云托管服务,云安全问题成为不容忽视的焦点。云服务的便捷性为企业提供了强大的存储和计算能力,然而,与之伴随而来的攻击风险也日益显著。最新的研究数据揭示,云安全漏洞可能导致的数据泄露&a…

ETCD监控方法以及核心指标

文章目录 1. 监控指标采集1.1 监控指标采集1.2 配置promethues采集和大盘 2. 核心告警指标3. 参考文章 探讨etcd的监控数据采集方式以及需要关注的核心指标,便于日常生产进行监控和巡检。 1. 监控指标采集 etcd默认通过/metrics指标暴露相关指标,因此不…

【C语言】实现程序的暂停

编写程序时,有时候需要让程序在某些地方暂停执行,等待用户输入或者观察程序执行结果。在 C 语言中,有多种方法可以实现程序的暂停,包括 system("pause")、getchar() 和 while ((c getchar()) ! \n && c ! EOF)…

opencv#37 形态学操作——腐蚀

图像腐蚀目的 去除图像中微小物体 分离较近的两个物体 我们对图像中所有米粒进行二值化处理,之后进行连通域分割以求去整个图像中共用多少米粒,处理结果在可以发现,在上图中有一小块区域上有个小点(非米粒)&#xff…

Kotlin快速入门系列7

Kotlin的数据类、密封类、枚举类 数据类 与Java等语言不同,kotlin创建只包含数据的类时,需要在类名前声明关键字:data。 data class KotlinBean (val brand : String) 在kotlin中,编译器会自动的从主构造函数中根据所有声明的…

GMS测试Checklistfail---M37+M56+M58+无负一屏

问题: 1.M37 测试Fail ,"Nearby Share" 在edit菜单中,("Nearby Share" 需要on the first or second page); 2.M56 测试Fail, 无"monochrome icons”; 3.M58 测试Fail, "Scan QR Code"置灰(已更新所以apk…

RabbitMQ-如何保证消息不丢失

RabbitMQ常用于 异步发送,mysql,redis,es之间的数据同步 ,分布式事务,削峰填谷等..... 在微服务中,rabbitmq是我们经常用到的消息中间件。它能够异步的在各个业务之中进行消息的接受和发送,那么…

档案数字化转型面临问题

档案数字化转型面临以下问题: 1. 技术问题:档案数字化需要借助先进的技术手段和设备,包括扫描仪、存储设备和数据管理软件等。这些技术的成本高、操作复杂,需要专业的人员进行操作和维护。 2. 安全问题:档案数字化后的…

【Java程序设计】【C00176】基于SSM的图书管理系统(论文+PPT)

基于SSM的图书管理系统(论文PPT) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的图书管理系统 本系统分为前台系统、后台管理员以及后台学员3个功能模块。 前台系统:当游客打开系统的网址后,首先看到的就…