首页 > 其他分享 >Vue2实现双向数据绑定原理

Vue2实现双向数据绑定原理

时间:2023-05-31 23:33:55浏览次数:40  
标签:绑定 Object Vue Vue2 双向 defineProperty 数据 setter

Vue2.x 采用数据劫持结合发布订阅模式(PubSub 模式)的方式,通过 Object.defineProperty 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
Vue 的数据双向绑定整合了 Observer,Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 的数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化->视图更新,视图交互变化(例如 input 操作)->数据 model 变更的双向绑定效果。
Vue3.x 放弃了 Object.defineProperty ,使用 ES6 原生的 Proxy,来解决以前使用 Object.defineProperty 所存在的一些问题。

标签:绑定,Object,Vue,Vue2,双向,defineProperty,数据,setter
From: https://www.cnblogs.com/cyy22321-blog/p/17447665.html

相关文章

  • VUE2/3差异之模板写法
    OptionsAPI(选项API)传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。虽然尽量一个文件不要写太多代码(1000行内),但总有一些大型组件要一个文件写很多代码优点:各选项编写写位置固定,结构清晰缺点:代码组织性差,相似的逻辑代码不便于复用逻......
  • vue中v-bind使用三目运算符绑定class
    <template><div><!--外边框的样式--><div:class="projectStatus===2?outlineDelay:outline"@click="clickProject(userProjectId)"><!--延期--><divv-if="projectStatus===2"......
  • python deque的内在实现 本质上就是双向链表所以用于stack、队列非常方便
    Howcollections.dequeworks?Cosven  前言:在Python生态中,我们经常使用collections.deque来实现栈、队列这些只需要进行头尾操作的数据结构,它的append/pop操作都是O(1)时间复杂度。list的pop(0)的时间复杂度是O(n),在这个场景中,它的效率没有deque高。那deque内部......
  • Wpf基础入门——绑定(Binding)
    本篇文章学习于:刘铁猛老师《深入浅出WPF》Bing基础Binding更注重表达它是一种像桥梁一样的关联关系。WPF中,正是在这段桥梁上我们有机会为往来流通的数据做很多事情。如果把Binding比作数据的桥梁,那么它的两端分别是Binding的源(Source)和目标(Target)。一般情况下,Binding源是......
  • ASEMI双向可控硅BT137性能特点, BT137应用及购买指南
    编辑-Z本文将详细介绍可控硅BT137的性能特点、应用领域以及购买时需要注意的事项,帮助您更好地了解和选择BT137可控硅。 一、BT137可控硅简介可控硅(SiliconControlledRectifier,简称SCR)是一种四层三端半导体器件,具有高功率、高压、高温等优点,广泛应用于各种电子设备中。BT137是一......
  • ASEMI双向可控硅BT137性能特点, BT137应用及购买指南
    编辑-Z本文将详细介绍可控硅BT137的性能特点、应用领域以及购买时需要注意的事项,帮助您更好地了解和选择BT137可控硅。 一、BT137可控硅简介可控硅(SiliconControlledRectifier,简称SCR)是一种四层三端半导体器件,具有高功率、高压、高温等优点,广泛应用于各种电子设备中。BT137......
  • [ChatGPT 勘误] SAP SLT 是只能将数据从其他DB 往 HANA 写,还是支持双向读写?
    我的SAP技术交流群里有朋友遇到一个问题:同志们帮忙确认一个问题SLT是只能将数据从其他DB往HANA写是吧,,不能从HANA往其他系统写,,是的么?这个朋友求助ChatGPT,后者的回答是,SAPSLT只能将其他数据同步到SAPHANA数据库,而不支持将SAPHANA数据库里的数据导出并同步到其他......
  • 【LeetCode双向链表】LRU详解,双向链表实战
    LRU缓存请你设计并实现一个满足LRU(最近最少使用)缓存约束的数据结构。实现LRUCache类:LRUCache(intcapacity)以正整数作为容量capacity初始化LRU缓存intget(intkey)如果关键字key存在于缓存中,则返回关键字的值,否则返回-1。voidput(intkey,intvalu......
  • BT137-ASEMI双向可控硅BT134参数、尺寸、规格
    编辑:llBT137-ASEMI双向可控硅BT137参数、尺寸、规格型号:BT137品牌:ASEMI封装:TO-220特性:可控硅正向电流:8A反向耐压:600V引脚数量:3芯片个数:1包装方式:3000pcs/盘浪涌电流:40A 特点:双向可控硅工作温度:-40℃~150℃BT137应用:主要应用于调光、控温、马达控制BT137双向可控硅采用穿通隔离台面......
  • BT137-ASEMI双向可控硅BT134参数、尺寸、规格
    编辑:llBT137-ASEMI双向可控硅BT134参数、尺寸、规格型号:BT137品牌:ASEMI封装:TO-220特性:可控硅正向电流:8A反向耐压:600V引脚数量:3芯片个数:1包装方式:3000pcs/盘浪涌电流:40A特点:双向可控硅工作温度:-40℃~150℃BT137应用:主要应用于调光、控温、马达控制BT137双向可控硅......