阅读 5996
用自己的话总结vue双向绑定数据原理

用自己的话总结vue双向绑定数据原理

大家好,我是前端鼓励师maybe,作为前端,掌握vue框架可以说是必须滴,那么vue的双向数据绑定原理想必是要深入了解的一个知识点,那么你了解的双向绑定原理又是怎么样的呢?不管怎样,请给我一首歌的时间,我给你用官方的口吻讲解一波双向绑定的整个过程,剩下的半首歌时间我给你用我自己整理的话讲解一波,希望你看完我的文章,对vue的双向数据绑定原理有跟进一步了解和理解!

vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。

具体步骤

第一步:
需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么久能监听到了数据变化

第二步:
compile解析横板令,将模板中的变量替换成数据.然后初始化渲染页面视图,并将每个令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:
Watcher订阅名是 observer和 Compile之间通信的桥梁,主要做的事情是:
1.在自身实例化时往属性订倒器(dep)里面添加自己
2.自身必须有一个 update()方法
3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中定的回调,则功成身退

第四步:
MVVM作为数据绑定的入口,合 observer、 Compile和 Watcher三者,通过 Observer来监听自己的model数据変化,通过 Compile来解析编译模板指令,最终利用 Watcher搭起 Observer和 Compile之间的通信标梁,达到数据变化->视图更新新:视图交互变化(Input)->数据mode变更的双向绑定效果。

以上便是比较官方的口吻讲解vue的双向数据绑定原理,那么接下来,说说我对双向数据绑定原理的理解,要理解vue的双向数据绑定原理那就必须先理解MVC与MVVM模式的区别然后再理解vue的单项数据绑定原理,接下来给大家以图片和文字结合的方式讲解下:

1.MVC和MVVM的区别:

所以从上图可以看出来,MVVM设计模式是自动化的,vue就是采取了这种设计模式,我们可以发现,真正把数据和视图分离开的是MVVM模式,并不是MVC,因为controller当中有大量手工的DOM操作,只要界面改变,你的controller中的代码必须要更改(jquery),比如你可以想象一下,你页面当中元素的位置变了,你的选择器是不是肯定要变,选择器就写在DOM操作里面,这就是MVC和MVVM两种设计模式的区别。

2.vue的单项单项数据绑定原理:

单项绑定过程(自己总结的):变量变了,由set发通知给watcher,watcher告知虚拟DOM树,叫它该比较了,我这有值变了,于是生成新的dom树进行一个比较,然后逐级分类比较,比较出哪个元素发生变化就把这个元素更新到页面,这就是单项数据绑定原理。

3.vue双向数据绑定原理
vue的双向数据绑定原理,当页面有一个input元素咋办,这时候v-model双向数据绑定就派上用场了,但是v-model双向数据绑定原理又是怎样的呢?请看下图:


v-model原理其实就是给input事件绑定oninput事件 就会立刻调用底层对象对应的setter方法 改变data里的属性的值 从而实现双向数据绑定

经过上面一波骚操作,希望大家能在vue的面试中遇到vue双向数据绑定原理的问题,能够对答如流,答得尽量完整一点,如果我还有哪些地方漏了的,请在评论区指出,相互借鉴学习!

文章分类
前端
文章标签