前端技巧|vue双向绑定原理,助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了。今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦。
vue双向绑定
大家其实对于这个问题不会很陌生,vue中采用mvvm的模式,内置vm将view层与model层两者进行关联,任何一方的变化都会让另外一方受到影响。那回答完后,面试官还会继续追问,请回答一下你理解的双向数据绑定背后的原理是什么?那今天我们就一起探讨一下vue的背后的一些方式实现。
所谓要实现双向数据绑定,vue中内部采用了发布-订阅模式。内部结合了Object.defineProperty这个ES5的新特性(ie8浏览器可不支持哦…),对vue传入的数据进行了相应的数据拦截,为其动态添加get与set方法。当数据变化的时候,就会触发对应的set方法,当set方法触发完成的时候,内部会进一步触发watcher,当数据改变了,接着进行虚拟dom对比,执行render,后续视图更新操作完毕。
来,直接上图看一下
好,分析完原理后,我们来看下es5这个方法Object.defineProperty有什么用呢?
上代码运行一下:
运行的时候,我们不难发现,输入框里面的内容改变的时候,p标签里面的值也会对应的得到变化。原因是因为当输入框的内容发生变化的时候,我们获取到了输入框的值,然后将其赋值给object.msg属性。这样object的msg属性的set方法就会被执行,从而将对应的content值进行了改变。
那后续当我们去修改数据,视图会不会自动更新呢?
这样,整了一个定时器,过了2s中,修改了对象的数据,对象数据发生变化,从而又会触发set方法,实现了响应的数据改变,视图也会变成了hello-world的值。其实,这就是借助了vue中的Object.defineProperty对于数据的拦截处理的流程。
补充小贴士
vue 2.x中使用的Object.defineProperty对于数据进行拦截,其实还是有缺陷的
1、对象属性的新加或者删除无法监听;
2、数组元素的增加和删除无法监听。
那为啥2.x的时候不解决呢,从两点考虑:
1.性能:通过遍历对象的属性进行监听,但是属性值也是对象就需要深度遍历了,这时候显然能够劫持完整对象更好
2.无法监听数组:属性值改为数组,数组也算是一种特殊的对象,下标其实就是对象的属性,理论上是可以通过
Object.defineProperty来处理的,那尤大大为什么没有采用这种方式呢,猜测源于数组的使用场景,数组的主要操作场景是遍历,如果每一个元素都挂载set和get方法,会产生巨大性能消耗,而且数组下标变化频繁,操作方法居多,一旦数组长度发生变化,在无法自动检测的状态下,手动更新会是一个相当繁琐的工作。
那vue中是如何实现对数组的劫持呢,对7种常用的数组操作进行了重写,分别是push() 、pop() 、shift()、 unshift() 、splice() 、sort()、 reverse(),其中Vue.set()对于数组的处理其实就是调用了splice方法。
针对Object.defineProperty的缺点,ES6 Proxy都能够完美得解决,它唯一的缺 点就是,对IE不友好,所以vue3在检测到如果是使用IE的情况下(没错,IE11都不支持Proxy),会自动降级为Object.defineProperty的数据监听系统。
那么到这一步,恭喜哦!你已经明白了vue2.x的双向数据绑定原理了。
前端技巧|vue双向绑定原理,助你面试成功相关推荐
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.MVC模式 二.MVVM模式 三.双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 四.最后写一个 ...
- 【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...
- 浅谈vue双向绑定原理
简析mvvm框架 目前angular,reat和vue都是mvvm类型的框架 以vue为例 这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view. 当前台显示的view发生 ...
- Vue双向绑定原理代码实现
1.代码实现Vue双向绑定与事件绑定,v-bind v-model v-on DOM结构准备 <body><div id="app"><form> ...
- 浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定呢?vue又是怎么做的我们接下来就聊一聊 什么是双向绑定? 当数据模型data变化时,页面视图会得到响应更新 vue又是怎么做的? vue其实现原理是对data的getter/sette ...
- 通俗易懂了解Vue双向绑定原理及实现
https://www.cnblogs.com/wangjiachen666/p/9883916.html 亲测可用
- Vue基础知识总结 6:vue双向绑定原理
- Vue数据双向绑定原理(vue2向vue3的过渡)
众所周知,Vue的两大重要概念: 数据驱动 组件系统 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
- vue的数据双向绑定原理
前言: 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化,数据也会跟着同步变化.这也算是vue的精髓之处了.单项数据绑定是使用状 ...
最新文章
- UVA - 10603 Fill(BFS求最小值问题)
- Java Stream(流)的分类, 四大基本流的介绍
- svn提交报e200007错误
- 风险预测模型_随访78个月,仁济医院完成世界首个间质性肺病风险预测模型
- 友元是c还是java_[C++]【类】友元的三种声明及注意事项
- android gridview 滚动条位置,android-gridview单元格视图位置在滚动后发生...
- 【第一篇】Volley的使用之json请求
- thinkphp源码分析(三)—自动加载篇(Loader的分析)
- Thinking in Java 9.9 接口与工厂
- 逻辑回归系数的显著性检验(python实现)
- linux转换flv文件格式,在linux 如何播放FLV 和 WMV 格式的文件?
- 电信业务经营许可年报流程图文指南,教你年报怎么填
- linux驱动开发之spi-omap-100k.c源码分析
- 一辈子不用考试?你可能是个假程序员
- np.min()和np.argmin()函数用法
- Robotframework自定义库--读写本地的.txt文件
- [056] 微信公众平台开发视频教程全面来袭
- Redis基本类型-结合Set
- 加入购物车与购物车加减
- 保健品nmn是什么东西,nmn稳定性指标说明
热门文章
- Bootstrap的坑--千万别踩
- hadoop job 未跑满资源_Hadoop多用户资源管理–Fair Scheduler介绍与配置
- python的dll文件在哪_Python运行DLL文件的方法
- springboot数据访问基本操作步骤
- 05 | REST消息通信:如何使用 OpenFeign 简化服务间通信
- 北京大学计算机研究所所长,北大计算机研究所所长郭宗明:探索新机制,释放科研创新能力...
- mysql 一次性导入数据库_Mysql 一次性备份导出/导入恢复所有数据库
- 手把手带你领略双十一背后的核心技术Sentinel之服务的熔断降级
- 第三方分享接口api
- jQuery给输入框绑定键盘事件