VUE的双向数据绑定原理
vue.js是采用数据劫持
结合发布者-订阅者模式
的方式,通过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) -> 数据model变更的双向绑定效果。
当数据发生变化的时候(修改数据),就会触发Observer
里的set
方法,然后就通知Dep
函数,然后就到Compile
1)初始化,init的时候 初始化渲染页面视图;
2)将每个指令对应的节点绑定更新函数,添加监听数据的订阅者;
Dep
负责维护依赖,而订阅者则来自于compile
,一旦有数据变动,则会通过Watcher
绑定更新函数,此时Watcher
也向Dep
中添加了订阅者,一旦Dep
接到Observer
的通知,它就会再去通知Watcher
,Watcher
则会调用自身的update()
方法,并触发Compile
中绑定的回调,更新视图;
最后敲黑板:
首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;
然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会;
接着为input会添加监听事件,修改值就等于为该属性赋值,则会触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。
Object.defineProperty()
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
他定义的属性的值不可修改,不可删除,不可枚举,想要修改、删除、枚举,需要开启:writable:true
、configurable:true
、enumerable:true
参数
obj:
必须。目标对象;
prop:
必需。需要定义或修改属性的名字;
descriptor:
必需。目标属性所拥有得特性(描述符、描述项集合、配置集合)
返回值:传入函数的对象,即第一个参数obj;
function defineProperty() {let obj={},//obj.defineProperty(obj,"a",{value:1})Object.defineProperties(obj,{a:{value:1,configurable:true,//可操作性的,可以删除writable:true,//可写,可修改enumerable:true,//可枚举,可遍历},b:{value:2}return obj})
}
let _obj = defineProperty()
_obj.a=5
_obj.b=6
console.log(_obj) //{a:5,b:2}
可能遇到的问题:当修改属性的时候,发现视图没有更新
是因为你没有在data
中定义,然后初次渲染的时候,你修改的这个属性也就没有setter
和getter
方法,也就不会数据的双向绑定
解决方法:
1、可以在data中先定义这个属性为空,
2、利用this.$set(obj,修改的属性:属性值)
这里属于obj的属性和属性值都要写上
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的双向数据绑定原理是什么?(前端面试题)
一.vue2.x 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听 ...
- vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
- vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析 摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
最新文章
- Linux+Apache+Postgresql+PHP安装Drupal7.15
- 中文企业云操作系统 CecOS
- webclient 请求期间发生异常_ARM异常中断的原因及处理措施
- Spring IOC详解与配置
- 红橙Darren视频笔记 自定义RatingBar touch事件学习 dp转px listener监听
- phpfpm内存越来越高_内存时序越小越好,为什么DDR1到DDR4 时序值越来越高了?
- mfc搜索新建access字段_vs2010MFC中使用ODBC链接ACCESS数据库,怎样编写查找功能?...
- 免费学习编程-值得收藏
- QT 跨平台 代码框架
- 奇异值分解(SVD)(2)
- 从零开始学习node.js
- MATLAB优化工具箱 粒子群算法 particleswarm优化包
- [最新] Android 代码规范大全(Android开发速看),2021年最新大厂Android面试笔试题目
- 志高显示df什么意思_志高空调故障代码df是什么意思?
- 解决GitHub/GitLab官网访问慢的问题
- 数据库--数据备份与恢复
- 嵌入式工控机在舞台灯光控制中的应用
- 南华大学计算机学院王玉锋,喜报!南华大学和王玉锋同学双双获奖!
- 用c语言做学生公寓管理系统,基于C/S结构的学生公寓管理系统
- 如何使用 JavaScript 开发者控制台