聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的

小灰灰 2023-08-17 16:49 88阅读 0赞

[Object.defineProperty双向绑定原理][Object.defineProperty]

[https://www.cnblogs.com/wangjiachen666/p/9883916.html][https_www.cnblogs.com_wangjiachen666_p_9883916.html]

实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器`Observer`，用来监听所有属性。

如果属性发上变化了，就需要告诉订阅者`Watcher`看是否需要更新。

因为订阅者是有很多个，所以我们需要有一个消息订阅器`Dep`来专门收集这些订阅者，

然后在监听器`Observer`和订阅者`Watcher`之间进行统一管理的。

实现mvvm的双向绑定，是采用数据劫持结合**发布者-订阅者模式**的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：  
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者  
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数  
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的

实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

[Object.defineProperty]: https://www.jianshu.com/p/ea9d556d6529
[https_www.cnblogs.com_wangjiachen666_p_9883916.html]: https://www.cnblogs.com/wangjiachen666/p/9883916.html

发表评论取消回复

表情：

评论列表（有 0 条评论，88人围观）

还没有评论，来说两句吧...

相关阅读

相关 v-model实现数据的双向绑定

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，比如，在数据框上使用时，输入的内容会实时映射到绑定的数据上。 <div id="app">

阳光穿透心脏的1/2处/ 2023年10月18日 08:58/ 0 赞/ 17 阅读

相关聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的

[Object.defineProperty双向绑定原理][Object.defineProperty] [https://www.cnblogs.com/wangjiach

小灰灰/ 2023年08月17日 16:49/ 0 赞/ 89 阅读

相关聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

![1087572-20190718161638570-761601138.png][] VM 主要做了两件微小的事情：从 M 到 V 的映射（Data Bi

逃离我推掉我的手/ 2023年08月17日 15:54/ 0 赞/ 83 阅读

相关 vue使用v-model实现数据的双向绑定

使用v-model实现数据的双向绑定 v-model直接替换标签中的value属性即可一般使用与表单元素，与用户交互

不念不忘少年蓝@/ 2023年07月11日 06:27/ 0 赞/ 13 阅读

相关 v-model数据双向绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年12月22日 13:30/ 0 赞/ 107 阅读

相关 v html是双向绑定吗,v-model 数据双向绑定

v-model 数据双向绑定 v-model只能在表单元素中使用 Document v-bind绑定 v-model绑定 var vm = new Vue(\{ e

港控/mmm°/ 2022年10月12日 00:53/ 0 赞/ 220 阅读

相关【Vue】—数据的双向绑定v-model

【Vue】—数据的双向绑定v-model ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

悠悠/ 2022年09月03日 12:26/ 0 赞/ 80 阅读

相关 vue.js v-model数据双向绑定实例

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍： v-model这个指令只能用在<input>, <sel

冷不防/ 2022年06月17日 14:44/ 0 赞/ 173 阅读

相关 v-model实现数据的双向绑定

v-model实现数据的双向绑定数据的双向绑定涉及到`v-model`，最近研究了半天才明白其中的原理，先放一段源码出来： <div id="app">

清疚/ 2022年04月10日 06:16/ 0 赞/ 110 阅读

相关 vue之v-model数据双向绑定

以下是vue.js中 v-model数据的双向绑定demo: <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2022年04月06日 17:22/ 0 赞/ 128 阅读