码迷,mamicode.com
首页 > 其他好文 > 详细

vue2双向绑定原理

时间:2020-05-13 16:40:03      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:vue2   vue   集合   obj   date()   png   serve   数据   mode   

大家都知道vue是mvvm模式,即model、view、viewmodel组成,viewmodel是搭建view、model的桥梁,监听数据的变化,通知对应的视图做更新。但具体是什么情况还是不太明白,明天要面试了,昨天看了一遍文章,里面有张图让我彻底明白了,一起看一下吧。

技术图片

 

简单来说,就是数据劫持+订阅发布实现,通过object.defineproperty()来劫持各属性的getter和setter,在数据变更时通知订阅者,触发相应的监听回调,实现视图更新。

 

详细点来讲,将mvvm作为数据绑定的入口,整合observer、compile、watcher。

对每个vue属性使用objecet.defineproperty()实现数据劫持,每个属性分配一个订阅者集合管理数组dep;

订阅者来自compile,一旦数据改变,通知watcher绑定更新函数,同时向dep添加订阅者;

当dep接到observer变化时,会想向watcher通知,watcher调用update()方法,触发compile绑定的回调,视图更新。

 

vue2双向绑定原理

标签:vue2   vue   集合   obj   date()   png   serve   数据   mode   

原文地址:https://www.cnblogs.com/aruanmei/p/12883096.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!