vue的数据双向绑定原理
前言:
什么是数据双向绑定?
vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化。这也算是vue的精髓之处了。单项数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定?
在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。
即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
一 、vue双向绑定原理
- vue中的
v-model
可以实现双向绑定,采用数据劫持
结合发布者-订阅者模式
的方式,通过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变更的双向绑定效果。
名词解释:
一、 什么是setter、getter?
对象有两种属性:
1 . 数据属性:就是我们经常使用的属性
2 . 访问器属性:也称存取属性(存取器属性就是一组获取和设置值的函数)
控制台打印:
数据属性就是a和b;
get和set就是关键字,他们后面各自对应一个函数,这个函数就是上面红字部分所讲的,存储器属性。
get对应的方法称为getter,负责获取值,它不带任何参数。set对应的方法 是setter,负责设置值,在它的函数体中,一切的return都是无效的。
二、什么是Object.defineProperty()?
对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
定义对象可以使用构造函数或字面量的形式:
除了以上添加属性的方式,当然还可以使用Object.defineProperty定义新属性或修改原有的属性;
语法:Object.defineProperty(obj, prop, descriptor)
参数 :
obj:
必需,目标对象;
prop :
必需,需定义或修改的属性的名字;
descriptor:
必需,目标属性所拥有的特性;
返回值:
传入函数的对象,即第一个参数obj;
使用:
vue的数据双向绑定原理相关推荐
- angular 强制更新视图_angular,vue,react数据双向绑定原理分析
在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同. Angular数据绑定 Angular 采用"脏值检测"的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次 ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
目录 this指向 作用域.作用域链 预解析 变量提升 Vue组件传值 父子 子父 非父子 Vue数据双向绑定原理 1.this指向 函数的this指向 看调用.不看声明 (1)普通函数调用 ①函数名 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- Vue 3.0双向绑定原理的实现
proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Vu ...
- Vue数据双向绑定原理(vue2向vue3的过渡)
众所周知,Vue的两大重要概念: 数据驱动 组件系统 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
- vue数据双向绑定原理
vue 双向绑定原理 官网–https://cn.vuejs.org/v2/guide/reactivity.html 1.vue双向数据绑定是 通过 数据劫持 并结合 发布-订阅模式 的方法来实现的 ...
- vue实现数据双向绑定的基础之理解对象属性类型
原生JavaScript之理解对象 ECMA-262 把对象定义为:"无序属性的集合,其属性可以包含基本值.对象或者函数."严格来讲, 这就相当于说对象是一组没有特定顺序的值.对象 ...
- 基于Vue2.0数据双向绑定原理-详解
在线使用-线上测试-源码 //代码: <div id="app"><input v-model="name" type="text& ...
最新文章
- 孩子从小要学编程吗?
- table control 光标定位控制
- 适合pythonpandas的软件_Pandas的10大惊人应用-哪个行业领域正在使用Python Pandas?...
- numpy 删除元素
- java-jdk7新特性
- SQLite第九课 sqlite3_set_authorizer案例
- C# 图片转换为base64
- optisystem自建matlab信号源仿真
- 递归算法经典实例小结(C#实现)
- 京瓷打印机驱动安装教程,怎么安装方便点?
- 数据结构导论-不得不知的基础
- 如何用自己电脑做服务器,绑定域名建一个个人网站
- CSS-Cascading Style Sheet_层叠样式表_用法详解
- 个人网络信息安全管理方法
- inlinehook 看这一篇
- SQL 视图 简记
- 某宝 小黑屋 x-sg?xt x-si?n x-m?ni-w?a 分析学习
- SVN拉取和Excel冲突合并
- 关于‘-[UIViewController _loadViewFromNibNamed:bundle:] loaded the “XXXView“ nib but the view outlet wa
- 素描如何避免抄调子?针对素描美术加建议这样学~
热门文章
- 计算机专业答辩需要演示系统么,计算机专业毕业设计答辩流程.doc
- android实况天气,天气实况预报系统的具体实现 - Android手机天气预报系统设计及实现...
- LaTeX技巧016:使用第三方字体时的路径设置问题
- CentOS 7安装Cowsay(奶牛有话说)
- 设备树学习(二十六、番外篇-中断子系统之CMWQ概述[2])
- No such file or directory #include <QX11Info>
- 国考照片怎么处理?2寸证件照怎么制作?
- Android make脚本简记
- asterisk 三方/多方通话
- 2022年最新辽宁交安安全员考试题库及答案