当前位置: 首页 > news >正文

Vue 双向绑定原理

Vue2 双向绑定原理

mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来 劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

几个要点: 1)实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通 知订阅者 2)实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据, 以及绑定相应的更新函数 3)实现一个 Watcher,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通 知,执行指令绑定的相应回调函数,从而更新视图 4)mvvm 入口函数,整合以上三者

具体步骤: 需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter这样的 话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化 compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对 应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图 Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:在自身实例化时往属 性订阅器(dep)里面添加自己自身必须有一个 update() 方法待属性变动 dep.notice() 通知时,能调 用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。 MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过Observer来监听 自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变 更的双向绑定效果

Vue3 双向绑定原理

用Proxy代替Object.defineProperty?

Vue2.X通过Object.defineProperty()来劫持各个属性的setter,getter,新版本通过Proxy劫持属性 Proxy优势 支持数组,其实还不止

Object.defineProperty() 的问题主要有三个: 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌套的对象

1,Object.definedProperty作用是劫持一个对象的属性,劫持属性的getter和setter方法,在对象的属性发生变化时进行特定的操作。而 Proxy 劫持的是整个对象。

Proxy 会返回一个代理对象,我们只需要操作新对象即可,而 Object.defineProperty只能遍历对象属性直接修改。

2,Object.definedProperty不支持数组,更准确的说是不支持数组的各种API,因为如果仅仅考虑arry[i] = value 这种情况,是可以劫持的,但是这种劫持意义不大。而Proxy 可以支持数组的各种API。

3,尽管 Object.defineProperty 有诸多缺陷,但是其兼容性要好于 Proxy.

PS: Vue2.x 使用 Object.defineProperty 实现数据双向绑定,V3.0 则使用了 Proxy

相关文章:

Vue 双向绑定原理

Vue2 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来 劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 几个要点: 1&#…...

【数据治理-03】无规矩不成方圆,聊聊如何建立数据标准

无规矩,不成方圆!数据标准(Data Standards)是保障数据的内外部使用和交换的一致性和准确性的规范性约束,作为数据治理的基石,是绕不开的一项工作,如此重要的活如何干,咱们一起聊聊。…...

dos常用命令

DOS(磁盘操作系统)命令,是DOS操作系统的命令,是一种面向磁盘的操作命令,主要包括目录操作类命令、磁盘操作类命令、文件操作类命令和其它命令。 使用技巧 DOS命令不区分大小写,比如C盘的Program Files&…...

解决原生template标签在Vue中失效的问题

文章目录前言一、事件未绑定的原因二、如何处理原生template标签总结前言 需要原生Javascript three.js的数据标注平台加入Vue框架. 本来挺顺利的, 我直接在mounted周期做了初始化, 然后剩下的操作还是交给JavaScript文件执行, 最后发现里面有很明显的事件触发问题. 一、事件…...

节能降耗方案-医院能源管理系统平台的研究与应用分析

摘要:综合性医院作为大型公共机构,能耗高的问题日益突出,构建能耗监控平台对医院能耗量化管理以及效果评估已经成为迫切需要。建立智能能耗监控平台,对采集的能耗数据进行分析,实现对医院能耗平台监控,为医…...

Redis学习【7】之发布_订阅命令和事务

文章目录一 发布/订阅命令1.1 消息系统1.2 subscribe1.3 psubscribe1.4 publish1.5 unsubscribe1.6 punsubscribe1.7 pubsub1.7.1 pubsub channels1.7.2 pubsub numsub1.7.3 pubsub numpat二 Redis 事务2.1 Redis 事务特性Redis 事务实现2.1.1 三个命令2.1.2 基本使用2.2. Redi…...

MySQL8.0 optimizer_switch变化

Optimizer_switch变量是支持对优化器行为的控制。是一组值标志,每个标志都有一个on或off的值,以指示是否启用或禁用相应的行为。 MySQL8.0里除了熟悉的hash join重大变化之外,其他方面也有优化。 mysql> SHOW VARIABLES LIKE OPTIMIZER_…...

Web--Maven

1.maven管理项目的区别 2. 安装后,conf目录下的setting文件中,对本地仓库的配置 此处可替换成自定义的本地仓库地址,默认为c:/user/17860/.m2/repository(我的电脑上的) 3.maven项目的标准目录结构 4.项目的生命周期 5.Maven概…...

深入理解MySQLⅢ -- 锁与InnoDB引擎

文章目录锁概述全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁InnoDB引擎逻辑存储结构架构内存结构磁盘结构后台线程事务原理redo logundo logMVCC锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,除传统的计算资源&#x…...

Win11电脑速度慢、延迟高怎么办?

作为新版的系统,Windows 11还需要更多的时间完善。不少用户反映升级了Win11后反而感觉速度慢,还有延迟或死机现象。 如果你使用Win11系统时也有这种感觉,那这篇文章就是为你提供的。 问题可能出在系统存储容量低、驱动程序已过时&#xff0…...

【双指针问题】977. 有序数组的平方

Halo,这里是Ppeua。平时主要更新C语言,C,数据结构算法......感兴趣就关注我吧!你定不会失望。 🌈个人主页:主页链接 🌈算法专栏:专栏链接 我会一直往里填充内容哒! &…...

Meta AR眼镜主管:正开发史无前例的AR,但要解决很多困难

前不久,Meta CTO Andrew Bosworth在个人博客上“怒斥”公司内部不够专注,应该将资源投入在有核心竞争力、高投资回报率的业务上,而不是开发取悦用户却不赚钱的产品。尽管删除一些小众功能后,用户可能会不满,但为了让Me…...

Docker 搭建KingbaseES主备流复制

author: aming email: jikcheng163.com title: Docker 安装KingbaseES读写分离集群 creation_date: 2023-02-16 13:59 Last modified date: 2023-02-16 19:18 tags: Docker 安装KingbaseES读写分离集群 File Folder with relative path: reading notes/doc/Docker技术入门与实战…...

java易错题锦集四

effective java 不要再构造方法中启动任何线程 g new GameServer(); g.start();构造器无返回值,但是不能void修饰 字符串 String是包装类型吗?答案: 不是 对应的基本类型和包装类如下表: 基本数据类型 包装类 byte Byte bool…...

每天10个前端小知识 【Day 17】

前端面试基础知识题 1.使用原生js实现以下效果:点击容器内的图标,图标边框变成border:1px solid red,点击空白处重置 const box document.getElementById(box); function isIcon(target) { return target.className.includes(icon); } b…...

Python语言零基础入门教程(二十三)

16、Python os.fpathconf() 方法 概述 os.fpathconf() 方法用于返回一个打开的文件的系统配置信息。 Unix上可用。 语法 fpathconf()方法语法格式如下: os.fpathconf(fd, name)参数 fd – 打开的文件的描述符。 name – 可选,和buffersize参数和Pyt…...

[ansible系列]ansible使用扩展

目录 一. 本地执行 二. 任务委托 三. 任务暂停 四. 滚动执行 五. 只执行一次 六. 设置环境变量 七. 交互提示 一. 本地执行 我们知道ansible的是操作被控端的,所有执行的动作都是在被控端上完成的,当然在某些特定的时候我们想要有些tas…...

Java工具类(时间格式转换)

import java.util.Date; import java.text.DateFormat; /** * 格式化时间类 * DateFormat.FULL 0 * DateFormat.DEFAULT 2 * DateFormat.LONG 1 * DateFormat.MEDIUM 2 * DateFormat.SHORT 3 * author Michael * version 1.0, 2007/03/09 */ public c…...

数据库(第五次作业)

1.1 Redis概述 1.1.1 什么是Redis 2008年,意大利的一家创业公司Merzia推出了一款基于MySQL的网站实时统计系统LLOOGG,然而没过多久该公司的创始人 Salvatore Sanfilippo便开始对MySQL的性能感到失望,于是他决定亲自为LLOOGG量身定做一个数据…...

代码随想录【Day16】| 110. 平衡二叉树、257. 二叉树的所有路径、404. 左叶子之和

110. 平衡二叉树 题目链接 题目描述: 给定一个二叉树,判断它是否是高度平衡的二叉树。 本题中,一棵高度平衡二叉树定义为:一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 示例 1: 给定二叉树 [3,9,20,null,nul…...

套娃式工具!用 AI 识别 AI ?#AI classifier

2022年以来,市面上就出现了不少 AI 生成文本的工具,尤其是 OpenAI 推出的 ChatGPT ,不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务,还能通过学习和理解人类的语言来进行对话,并根据聊天的上下文进行互动…...

CURL error 60: SSL certificate problem: certificate has expired

项目使用guzzleHttp做的一个接口,报错:certificate has expired 因为在linux centos环境与window环境有所不同,在此记录一下解决过程。 目录 报错提示 原因 解决方式 1.去掉guzzlehttp的验证 2.更新CA证书 总结 报错提示 cURL error 60…...

接口自动化:requests

引言:目前软件测试对测试人员的能力要求 业务测试能力:占比5-6成接口、自动化、性能测试能力:占比4-5成流程规范:1成(需要综合型的测试人才):业务能力、代码能力、开发思维(封装&…...

极简TypeScript教程--数据类型

TypeScript最大的特点就是有类型检测,格式为let/const 标识符: 数据类型 赋值;例子:let msg: string Hello World这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型,就会在编译期报错。变量的类型推导在开发中,有时候为了方便起见…...

JAVA开发测试(jmeter如何测试性能与估算)

对C的业务网站或应用,进行性能测试来评估使用服务器情况是必不可少的一项工作。 一、测试工具: Apache JMeter 可以用于对服务器、网络或对象模拟巨大的负载,来自不同压力类别下测试它们的强度和分析整体性能,是Apache组织开发的…...

【新解法】华为OD机试 - 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供

华为 OD 清单查看地址:blog.csdn.net/hihell/category_12199275.html 求解连续数列 | 备考思路,刷题要点,答疑,od Base 提供 题目 已知连续正整数数列{K}=K1,K2,K3… Ki的各个数相加之和为S, i = N (0 < S < 100000, 0 < N < 100000), 求此数列K。 输入 输…...

Python3 File(文件) 方法

Python3 File(文件) 方法 open() 方法 Python open() 方法用于打开一个文件&#xff0c;并返回文件对象。 在对文件进行处理过程都需要使用到这个函数&#xff0c;如果该文件无法被打开&#xff0c;会抛出 OSError。 注意&#xff1a;使用 open() 方法一定要保证关闭文件对…...

APP渗透抓包

APP渗透抓包1.APP渗透测试原理2.安装安卓模拟器抓包2.1.安装模拟器2.2.设置代理下载证书2.2.1.burp suite设置代理2.2.2.浏览器设置代理2.2.3.下载证书2.3.模拟器安装证书2.3.1.移动证书2.3.2.证书设置2.4.设置代理2.4.1.设置burp suite代理2.4.2.夜神模拟器代理2.5.抓包测试2.…...

力扣(LeetCode)414. 第三大的数(2023.02.16)

给你一个非空数组&#xff0c;返回此数组中 第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&#xff1a;[3, 2, 1] 输出&#xff1a;1 解释&#xff1a;第三大的数是 1 。 示例 2&#xff1a; 输入&#xff1a;[1, 2] 输出&#xff1a;2…...

Spring底层

一、什么是Spring&#xff1f;谈谈你对IOC和AOP的理解。Spring&#xff1a; 是一个企业级java应用框架&#xff0c;他的作用主要是 简化软件的开发以及配置过程&#xff0c;简化项目部署环境。Spring的有点&#xff1a;1、Spring低侵入设计&#xff0c;对业务代码的污染非常低。…...

电子商务网站规划的原则/郑州seo多少钱

常规A纸尺寸大小&#xff1a;&#xff08;单位&#xff1a;毫米&#xff09;A6纸尺寸&#xff1a;105148&#xff1b;&#xff08;64开纸&#xff09;A5纸尺寸&#xff1a;148210&#xff1b;&#xff08;32开纸&#xff09;A4纸尺寸&#xff1a;210297&#xff1b;&#xff08…...

网站建设的后期维护费用/昆明seo

var arr [1,2,3,4,5]; // 判断每个值是否大于小于某个数字 var flag arr.every(function(x) { // return x < 3; // flag->falsereturn x < 6; // flag->true });console.log(flag) var arr [1,2,3,4,5]; // 判断每个值是否有值等于指定的值var flag arr.s…...

河北中保建设集团网站/qq群推广软件

Unix_Linux 的 keyctlkeyctl -操作内核的密钥管理工具内容简介#include long keyctl(intcmd, ...);描述keyctl()有许多功能可用&#xff1a;标签描述KEYCTL_GET_KEYRING_IDAsk for a keyring’s ID.KEYCTL_JOIN_SESSION_KEYRINGJoin or start named session keyring.KEYCTL_UPD…...

微信小程序购物平台/谷歌排名优化入门教程

linux常见报错有哪些&#xff1f;command not found 命令没有找到NO such file or directory 没有这个文件或者目录Permission denied 权限不足No space left on device 磁盘没有剩余空间File exists 文件已经存在Is a directory 这是一个目录Not a directory 这不是一个目录Wa…...

一流本科专业建设点网站/百度关键词价格怎么查询

图的独立集&#xff1a;寻找一个点集&#xff0c;其中任意两点在图中无对应边二分图的最大独立集图的点数-最大匹配数1 #include <iostream>2 #include <cstdio>3 #include <map>4 #include <cstring>5 6 using namespace std;7 8 struct people9 {10 …...

手机视频网站怎么做/企业文化设计

最近项目要用到subversion来做版本控制&#xff0c;一次找了些svn和VisualSVN的资料 软件需求&#xff1a; vs2005&#xff1b;TortoiseSVN-1.4.4.9706-win32-svn-1.4.4&#xff1b;VisualSVN-1.3.1 1.简介 VisualSVN是个和Visual Studio 配套的软件,实现SVN功能 svn是sub…...