vue--双向数据绑定原理

  • Vue采用数据劫持 + 发布者-订阅者模式实现双向数据绑定,实现逻辑图如下所示:
    在这里插入图片描述

数据劫持

Vue 借助Object.defineProperty()来劫持各个属性,这样一来属性存取过程都会被监听到

发布者-订阅者模式

主要实现三个对象:Observer(观察者),Watcher(订阅者,观察者),Dep(发布者,订阅收集器)。

1、Observer: 数据的观察者,让数据对象的读写操作(数据劫持)都处于自己的监管之下

2、Watcher: 数据的订阅者,数据的变化会通知到Watcher,然后由Watcher进行相应的操作,例如更新视图

3、Dep: Observer与Watcher的纽带,当数据变化时,会被Observer观察到,然后由Dep通知到Watcher

相关推荐

  1. Vue双向数据原理

    2024-04-15 05:16:04       45 阅读
  2. Vue 双向数据

    2024-04-15 05:16:04       19 阅读
  3. Vue双向数据原理

    2024-04-15 05:16:04       31 阅读
  4. vue2 双向数据的实现及原理

    2024-04-15 05:16:04       12 阅读
  5. vue双向原理

    2024-04-15 05:16:04       30 阅读
  6. vue3组件数据双向

    2024-04-15 05:16:04       30 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-15 05:16:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-15 05:16:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-15 05:16:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-15 05:16:04       20 阅读

热门阅读

  1. 物联网智能仓储系统毕业设计报告

    2024-04-15 05:16:04       20 阅读
  2. 方法引用(详)

    2024-04-15 05:16:04       17 阅读
  3. 【华为OD机试C++】图片整理

    2024-04-15 05:16:04       21 阅读
  4. 4-安装并配置Grafana并导入特定的仪表板模板

    2024-04-15 05:16:04       23 阅读
  5. 未来的前端框架技术发展趋势

    2024-04-15 05:16:04       20 阅读
  6. 获取主页数据并显示流程笔记

    2024-04-15 05:16:04       30 阅读
  7. 基于单片机的智能照明控制系统设计与实现

    2024-04-15 05:16:04       14 阅读
  8. 如何在CentOS中开放指定端口

    2024-04-15 05:16:04       19 阅读
  9. Unity Android Release-Notes

    2024-04-15 05:16:04       21 阅读
  10. 课时94:脚本自动化_脚本信号_信号基础

    2024-04-15 05:16:04       16 阅读
  11. C#`DataGridView`控件显示多余的空行

    2024-04-15 05:16:04       18 阅读