Vue双向绑定原理

Vue双向绑定原理vue的双向绑定原理:vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过obj.defineProperty()方法来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;简单介绍一下Object.defineProperty()方法:1、Object.defineProperty(obj,prop,descriptor),这个语法内有三个参数,分别为obj(要定

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

vue的双向绑定原理:

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

简单介绍一下Object.defineProperty()方法:

1、Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象); prop (要定义或修改的属性); descriptor (具体的改变方法)
2、简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。当给这个属性赋值时,就调用了它里面的set方法;

下面展示一个简单的例子


var obj = { 
   }
Object.defineProperty(obj,'prototypeName',{ 
   
	get: function() { 
    
		console.log("调用了get") 
	},
	set: function(newValue) { 
   
		console.log("调用了set,新值是"+newValue)  
	}
})

obj.prototypeName    // 调用了get
obj.prototypeName = 'hello'   // 调用了set,新值是hello

实现过程:

先附上一张网图
请添加图片描述

首先再vue初始化的时候,就对data数据进行了劫持监听,其中就是监听器 Observe,用来监听所有属性。
若有属性发生变化就需要告诉订阅者Watcher看是否需要更新。
因为订阅者Watcher有多个,所以需要一个消息订阅器 Dep 来专门收集这些订阅者,在监听器Observe和订阅者Watcher之间进行统一管理。
还需要有一个指令解析器 Compile ,对每个节点元素进行扫描解析,将相关的指令(如 v-model,v-on …)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应函数
当订阅者Watcher接收到相应属性的变化通知,就会执行对应的更新函数,从而去更新视图。

  1. 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者
  2. 实现一个订阅者Watcher,每个Watcher都绑定一个更新函数,Watcher可以收到属性的变化通知并执行相应的函数,从而更新视图
  3. 实现一个消息订阅器 Dep ,主要收集订阅者,当 Observe监听到发生变化,就通知Dep 再去通知Watcher去触发更新。
  4. 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,若节点存在指令,则Compile初始化这类节点的模板数据(使其显示在视图上),以及初始化相应的订阅者。

这里不做具体代码展示,具体方法实现可以参考 这里
vue源码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180622.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 使能DHCP Relay_option键的作用

    使能DHCP Relay_option键的作用DHCP一家子(不包括DHCPv6)包括DHCPClient、DHCPServer、DHCPRelay以及DHCPSnooping,之后我会一个个详细学习之后发出来。今天讲述一下DHCPrelay,之前先学习的DHCPSever,还没来得及整理,之后会发出来,今天先说说DHCPRelay。DHCPRelay(DHCP中继),也叫作DHCPAgent,主要用于DHCPClient和DHCPServer不在一个网段时,DHCPClient又有自动地址分配的请…

    2022年10月15日
  • python 内置函数详解

    python 内置函数详解

  • 基础概念 — SOP「建议收藏」

    基础概念 — SOP「建议收藏」StandardOperationProcedure定义精髓企业sop提高企业运行效率提升企业运行效果步骤1)确定流程2)明确步骤3)制定SOP4)执行操作定义标准作业程序将某一事件的标准操作步骤和要求以统一的格式扫描出来,用来指导和规范日常的工作精髓将细节进行量化即对某一程序中的关键控制点进行细化和量化企业sop提高企业运行效率企业的日常工作有两个基本的特征,一是许多岗位的人员经常会发生变动,二是一些日常的工作的基本作业程序相对比较稳定。通过SOP对细节进行量化和规范例如:在一

  • ps磨皮滤镜portraiture安装教程mac[通俗易懂]

    ps磨皮滤镜portraiture安装教程mac[通俗易懂]PortraitureforMac激活成功教程版是Photoshop上一款支持自动皮肤平滑、愈合和增强效果的磨皮插件,这款portraiture磨皮滤镜主要针对人像进行皮肤修饰、磨皮润色等处理,portraituremac激活成功教程版还可以平滑和去除缺陷,同时保留皮肤纹理和重要的人像细节,功能十分强大,这里为大家带来portraiture激活成功教程版,并附上激活成功教程补丁。portraiture激活成功教程方…

  • Telerik的RadControls控件(二)

    Telerik的RadControls控件(二)继上篇我们学习了RadWindow控件的用法之后,本篇我们将学习在项目中更加方便开发人员的常用控件RadAjax控件.  RadAjax是面向ASP.NET应用程序无编码AJAX使能化的第一个框架。这个专利Click-and-Go™技术可以让你不需要对你应用程序做任何修改(摆放Callback面板,设置触发器等)。最棒的是,你根本不需要写一行的JavaScript或s

  • word 里域代码显示设定

    word 里域代码显示设定1.问题点:WindowsWord里copy&paste时,突然会出现下面的内容。2.解决方案1上述显示的域代码而不是域值。查了一下,可以使用Alt+F9来切换显示域代码&域值。(另:Shift+F9可以切换指定的区域)3.解决方案2在“选项”->”高级”->”显示文档内容”:勾掉”显示域代码而非域值“即可设置

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号