vue双向数据绑定原理

一、什么是双向数据绑定?

        双向数据绑定指的是Vue 会自动跟踪数据状态并在其发生变化时响应式地更新 DOM,且DOM更新时,数据也会进行相应的更新。

二、Vue双向数据绑定原理

        vue双向数据绑定原理主要是依靠数据劫持结合发布者-订阅者的方式来实现的。

        先对数据进行监听,然后当监听的数据发生变化时,通知订阅者是否需要更新页面,若更新,则会执行特定的更新函数,对页面进行更新;通过Object.defineProperty()来劫持各个属性的setter及getter,在数据发生变化时,触发对应的回调函数。

        当把一个js对象作为vue的data内容时,vue会遍历该对象的所有属性,并通过Object.defineProperty()将其转换位setter或getter,vue对其进行追踪和依赖,从而实现双向数据绑定。

        故,vue双向数据绑定的核心是Object.defineProperty()

三、Object.defineProperty(obj, prop, descriptor)

        obj:定义属性对象

        prop:定义或修改的属性

        descriptor:具体的改变方法

let obj = {}
Object.defineProperty(obj,'name',{get:function(){console.log('调用了get方法')},set:function(){console.log('调用了set方法')}
})
obj.name;
obj.name= 'Tom'

四、双向数据绑定及单项数据绑定的区别 

        单向绑定的优点是相应的可以带来单向数据流,这样做的好处是所有状态变化都可以被记录、跟踪,状态变化通过手动调用通知,源头易追溯,没有“暗箱操作”。同时组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。缺点则是代码量会相应的上升,数据的流转过程变长,从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。

        基本上双向绑定的优缺点就是单向绑定的镜像了。优点是在表单交互较多的场景下,会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”,我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心),潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个,新手玩家很容易将数据流转方向弄得紊乱,如果再缺乏一些“管制”手段,最后就很容易因为一处错误操作造成应用雪崩。

 

        

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

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

相关文章

【Docker】使用Docker部署IT运维管理平台CAT

作者怀揣着一个美好的愿景,旨在提升管理效率、推动开源项目的蓬勃发展。 来一杯咖啡与茶,为 IT 运维从业者减轻管理负担,提升管理效率,从繁重无序的工作中解压出来,利用剩余时间多喝一杯休息一下。 这是一个专为 IT 运…

windows安装prometheus和grafana

prometheus官网 grafana 软件下载 prometheus windows_exporter https://github.com/prometheus-community/windows_exporter grafana prometheus原理 配置prometheus 解压之后prometheus-2.50.1.windows-amd64.zip修改prometheus.yml localhost修改为127.0.0.1 双击p…

爬虫神器!使用Python一键下载网页图片,省时高效!

引言 爬虫技术在当今信息时代中扮演着重要的角色,可以自动化获取互联网上的数据。本教程将围绕你提供的Python爬虫代码展开,旨在实现自动下载图片的功能。通过这个示例,你将学习如何利用爬虫技术批量获取网页中的图片,并将其保存…

System.currentTimeMillis() 统计代码耗时了,StopWatch 更优雅!

简述 有时我们在做开发的时候需要记录每个任务执行时间,或者记录一段代码执行时间,最简单的方法就是打印当前时间与执行完时间的差值,然后这样如果执行大量测试的话就很麻烦,并且不直观,如果想对执行的时间做进一步控制…

Python下有关CV的一些算法和函数

目录: 1. HoughCircles二级目录三级目录 1. HoughCircles 霍夫圆检测 二级目录 三级目录

Python轴承故障诊断 (17)基于TCN-CNN并行的一维故障信号识别模型

往期精彩内容: Python-凯斯西储大学(CWRU)轴承数据解读与分类处理 Python轴承故障诊断 (一)短时傅里叶变换STFT Python轴承故障诊断 (二)连续小波变换CWT_pyts 小波变换 故障-CSDN博客 Python轴承故障诊断 (三)经验模态分解EMD_轴承诊断 …

docker 安装minio,详细图解

废话不多说,直接上干货 docker 安装minio 拉取镜像 docker pull minio/minio创建数据目录、配置目录 mkdir /opt/minio/data mkdir /opt/minio/config启动容器 docker run -p 9000:9000 -p 9090:9090 \--name minio \-d --restartalways \-e "MINIO_ACCESS_KE…

[LLM]大语言模型文本生成—解码策略(Top-k Top-p Temperature)

{"top_k": 5,"temperature": 0.8,"num_beams": 1,"top_p": 0.75,"repetition_penalty": 1.5,"max_tokens": 30000,"message": [{"content": "你好","role": "user&…

【递归专题】【蓝桥杯备考训练】:有序分数、正则问题、带分数、约数之和、分形之城【已更新完成】

目录 1、有序分数(usaco training 2.1) 2、正则问题(第八届蓝桥杯省赛C A组 & Java A组) 3、带分数(第四届蓝桥杯省赛Java A组/B组 & C B组/C组) 4、约数之和(《算法竞赛进阶指南》…

图形学 总结 - 老是忘

渲染流水线: 1、首先相机摆放到场景一个位置和角度,场景的各个物体也已经被摆放好 2、拿到场景物体的顶点信息,根据顶点信息构成图元 3、经过透视投影,将图元转化为2*2的正方形,再把2*2的正方形扩展到屏幕大小 4、…

修复 error Delete `␍` prettier/prettier 错误

修复 error Delete ␍ prettier/prettier 错误 问题背景报错信息报错原因解决办法修改CRLF----针对单个文件yarn run lint --fix 一键修复(官方提供) 问题背景 今天在使用 openapi 自动生成前端接口代码的时候,爆了一个类似 eslint 规范的错…

商业银行清算业务:关键要素与实务发展的深度探索

商业银行清算业务:关键要素与实务发展的深度探索 商业银行清算业务,作为金融市场的核心引擎,其重要性在金融科技的浪潮下日益凸显。在当前金融市场的广阔背景下,深入解析和把握商业银行清算业务的关键要素及其实务发展&#xff0…

机器人路径规划:基于流场寻路算法(Flow Field Pathfinding)的机器人路径规划(提供Python代码)

流场寻路算法(Flow Field Pathfinding)是一种基于流体动力学理论的路径规划算法,它模拟了流体在空间中的流动,并利用流体的运动特性来指导路径的选择。下面是流场寻路算法的基本介绍及算法描述: 1. 基本介绍 流场寻路算法通过将环境划分为网…

算法导论第十二章练习参考答案(22) - 12.1-12.4

Exercise 12.1-1 任何时候,如果一个节点有一个子节点,就把它当作右子节点,左子节点为NIL。 Exercise 12.1-2 二叉搜索树的属性保证了左子树的所有节点都更小,右子树的所有节点都更大。最小堆属性只保证一般的子节点大于父节点的关…

Java8函数式接口

文章目录 1. Runnable2. Consumer<T>3. Supplier<T>4. Function<T, R>5. Predicate<T> 函数式接口是Java 8中引入的一个概念&#xff0c;它指的是只有一个抽象方法的接口。Java 8通过FunctionalInterface注解来标记这样的接口。利用函数式接口&#xf…

你在测试金字塔的哪一层(上)

​在准备将软件上线到生产环境之前需要进行测试。随着软件测试方式日趋成熟&#xff0c;软件开发团队的测试也在取代大量手动测试&#xff0c;逐渐实现自动化测试。 通过自动化测试&#xff0c;开发团队可以在短短几分钟内就了解到软件是否存在问题&#xff0c;而不需要等待几天…

航空公司遭遇Play恶意家族攻击,亚信安全发布《勒索家族和勒索事件监控报告》

本周态势快速感知 本周全球共监测到勒索事件95起&#xff0c;与上周相比数量持平。 本周Play是影响最严重的勒索家族&#xff0c;Blacksuit和Ransomhub恶意家族紧随其后&#xff0c;从整体上看lockbit3.0依旧是影响最严重的勒索家族&#xff0c;需要注意防范。 本周大陆航空技…

【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件

简介 弹窗是移动应用中常见的一种用户界面元素&#xff0c;常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用&#xff0c;除此之外还支持自定义弹窗&#xff0c;来满足各种不同的需求。 下面是所有涉及到的弹窗组件官方文档…

华为认证报名多少钱?

首先&#xff0c;我们来看看HCIA考试费用。HCIA是华为认证的基础级别&#xff0c;主要面向初学者和刚入行的新人。根据官方规定&#xff0c;HCIA的考试报名费为200美金。这个费用相对较低&#xff0c;适合那些希望在经济压力较小的情况下&#xff0c;初步了解华为技术和认证体系…

CSS 浮动

浮动 在标准流当中&#xff0c;元素或者标签在页面上摆放的时候会出现不如意的地方。要想解决这些问题可以采用脱离标准流的方式来进行解决这些问题&#xff0c;脱离标准流也称为脱离文档流。 脱离标准流的解决方式有三种&#xff0c;一种是浮动&#xff0c;另外一种是固定定位…