defineProperty在数据劫持后是如何通知数据的更新和视图的更新的
vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情
我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(如v-model,v-on)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,每一个Watcher都绑定一个更新函数,watcher可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令(v-model,v-on等指令),如果节点存在v-model,v-on等指令,则解析器Compile初始化这类节点的模板数据,使之可以显示在视图上,然后初始化相应的订阅者(Watcher)
defineProperty在数据劫持后是如何通知数据的更新和视图的更新的的更多相关文章
- python数据赋值后,修改新数据,原数据如何保证不被修改?
python中对象,赋值后是同一地址,如果是可变对象,对其中一个修改会影响到另一个,如果要生成完全新的对象,应使用deepcopyimport copydata1=copy.deepcopy(data ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- ES6入门:数据劫持、Proxy、Reflect
什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...
- Flutter 初始化数据完成后再加载页面
一.初始化数据完成后再加载数据 1.为了达成这个目标尝试了多种方法总是失败 在Init 和didChangeDependencies 初始化数据过也不行 @override void didChang ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- 搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...
- Vue之九数据劫持实现MVVM的数据双向绑定
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...
- Vue 核心之数据劫持
前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...
- Vue框架核心之数据劫持
本文来自网易云社区. 前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需 ...
- Vue核心之数据劫持
前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Anglar,Regular,Vue,React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了, ...
随机推荐
- 在uni-app中调用高德地图去导航
1.判断一下是不是在微信环境 2.微信环境调用微信自带的地图导航 3.h5环境跳转去高德地图 guide() { let self = this; console.log("self.lat ...
- jsp第8个作业
public boolean addMail(Msg msg){ Statement st =null; Connection con=null; try{ //获取连接 con = getConne ...
- Crypto入门 (十二)转轮机加密
前言: 杰弗逊转轮加密,可以自己手动排列完成但是繁琐而且容易弄错,还是建议使用编程,我在手动弄得时候就是复制粘贴少了一个字母,弄了很久才发现,如果编程得话,就不会这样拉 转轮机加密: 题目如下: 1: ...
- Android 自定义View (二)
一.前言 上节 通过一个简单的旋转环对自定义view作了一个基本的认识,本文将大致讲解下实现的思路以及对该view的一些可能的改进. 二.思路 主要通过重写 view 中的 onDraw() 方法,利 ...
- 扫描线总结【线段树特殊性质,没有pushdown、query操作】
扫描线 题意 多个矩阵求交集,线段树的特殊操作,非常特殊的情况,一堆证明之后,就没有pushdown操作. 没有pushdown操作,也没有query操作,直接tr[1].len. 亚特兰蒂斯 由于点 ...
- Hadoop服务启动失败
Hadoop服务启动失败今天启动Hadoop时,终端报了一个新的错误 ```bashStarting namenodes on [192.168.19.128]192.168.19.128: ssh: ...
- The difference of src and href
href是Hypertext Reference的缩写,表示超文本引用.用来建立当前元素和文档之间的链接.常用的有:link.a.例如: <link href="reset.css&q ...
- 转贴:阿里云ESC-centos7服务器小白搭建FTP教程
1. 安装vsftpd yum -y install vsftpd 2. 检查vsftpd是否安装成功 rpm -q vsftpd vsftpd-3.0.2-29.el7_9.x86_64 # 检查方 ...
- curl: (35) SSL connect error的错误
1.先升级nss (Network Security Service, 网络安全服务) yum update nss如果没有nss,则需要安装nss服务 yum install nss 2.更新/安装 ...
- Serverless 架构演进与实践
Serverless 架构演进与实践 1. 介绍 Serverless 并不仅仅是一个概念,很多地方都已经有了它的影子和思想,本文将给大家介绍最近比较火的 Serverless. 首先放出官方对 Se ...