Vue的双向数据绑定原理是什么?(前端面试题)
一、vue2.x 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
二、具体步骤:
- 第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 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) -> 数据model变更的双向绑定效果。
Vue的双向数据绑定原理是什么?(前端面试题)相关推荐
- 【Vue的双向数据绑定原理】
Vue的双向数据绑定原理 先说面试答案: 1. 什么是setter.getter 2. 什么是Object.defineProperty() ? 先简单的实现一个js的双向数据绑定来熟悉一下`Obje ...
- Vue 的双向数据绑定原理解析
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 【Vue】双向数据绑定原理 vue2.0 与 vue3.0
目录 一.什么是双向数据绑定? 二.双向数据绑定原理 vue2.0 三.Vue 3.0使用ES6的新特性porxy 四.思考 一.什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数 ...
- Vue的双向数据绑定原理(极简版)
先说面试答案: 答: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者 ...
- 剖析Vue实现双向数据绑定原理
几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(inpu ...
- Vue的双向数据绑定原理是什么
在vue2.x中,双向数据绑定是通过数据劫持 结合 发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之改变.核心:关于Vue双向数据绑定,其核心是Ob ...
- VUE的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来 ...
- vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
- vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析 摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
最新文章
- 基于Pytorch的动态卷积复现
- springmvc整合mybatis框架源码 bootstrap html5 mysql oracle maven SSM
- 河南民办计算机大学排名,2020年河南最好的民办大学最新排名
- WIN32 使用事件实现高效生产者消费者模型
- DeepLearning based on PaddlePaddle系列二
- NIPS 2018论文解读 | 基于条件对抗网络的领域自适应方法
- 洛谷4139 bzoj 3884 上帝与集合的正确用法
- 【转】微软Azure Functions使用入门
- java 钩子线程_java-钩子线程
- 使用Python在Twitter上进行基本数据分析
- 《面向模式的软件体系结构1--模式系统》读书笔记(7)--- 通信
- 计算机插本2a院校,广东省专插本2A院校有哪些
- 让我们努力的学习ruby吧
- power bi报表html,数据可视化系列:Power BI基于Web数据的报表制作(经典级示例)
- JAVA C++异同
- 【数理统计】概率统计
- my love(新贵公子主题歌)铃声 my love(新贵公子主题歌)手机铃...
- 【图像识别】【读论文】模式识别方法概论模式识别及其在图像处理中的应用
- java循环输出abcd_java 输 abcd 输出其所有排列情况 permutate
- 【C++进阶】一、继承(总)