浅谈vue 之双向绑定和响应式（vue的响应式）
初识vue小伙伴通常都会被他的双向绑定所感叹，神奇？方便？而且在不少的面试中也会被面试官问到，上来就是：请问vue双向绑定的原来是什么？我们就来研究研究这是个什么东西：
v-model
官方其实已经说这玩意是个语法糖，主要就是监听和更新。换个名字：订阅和发布来进行数据劫持。
那么OK，咱们就先从监听开始，为了显得牛逼的一点或者专业一点，我们可以把他叫做变化侦测。通常我们要知道一个东西他变没变不外乎就两种方式，要么你跑过去看一下，要么那玩意自己跑过来告诉你。
在vue中就采用了后者，个人认为确实更靠谱。举个不靠谱的例子。
因为假设你在学校被人揍了，你爸肯定会知道（当然bug选手除外），这时候你爸一看不乐意了啊。肯定要为你打抱不平啊，那么摆在他面前的记忆两条路，第一：你告诉他事情的来龙去脉，然后他去揍那个揍你的小破孩（推）；第二：他直接去揍，但是又不知道是谁走了你，于是他就跑去把所有学生找出来，看看那些小破孩不太正常（做错了事，都会露出马脚），然后去揍（拉）。显然你自己说要好且合适些。而vue就好比你自己告诉你爸（推）。
那么他具体是怎么做的呢？
js里有这么个玩意：Object.defineProperty。通过这个方法可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。通常可以这么去使用它
Object.defineProperty(obj, prop, descriptor)
Object拿来干什么，存取东西啊，不难想到key:value。于是就有了添加setter 和 getter 用来设置和获取。
所有是不是就有了入口，再发散一下，在这个get 和 set 里去做一些事情是不是就相当于完成了一次变化的侦测。
于是我们可以做到一个简易的双向绑定（当然，我这里就没有用方法封装调用了，能懂意思就行）
运行（为什么不是gif?想啥呢多麻烦，自己c回去运行呗！）
然而到这里并没有结束，我们只是完成了vue的响应式中的监听，或者就说叫追踪到了变化，刚刚说了还有订阅还没做呢。
想一下平时订报纸，是不是给邮局打电话，说有新的报纸了就给我来一份，有了新的报纸邮局就给你打电话问你要不要等等，但是邮局肯定不是为你一个订啊，当然会有很多人，而邮局做的这个事情就是vue的手机依赖。显然订报纸的这需求就是依赖本身了（真的是这样吗），那么现在就是邮局在收集订阅报纸的人的这么一个需求，而这些需求最终都到了邮局手里。这个邮局就是vue的dep数组，用来储存依赖得到地方。
回到代码里面vue正是把这个过程干成一个类，来专门管理这些事物。要知道社会上什么样的人都有，我们说人就是依赖。同样的，依赖这玩意也是各种各样的，它可能是某个大冤种写的一个watch，也可能是一个模板。正是因为这些依赖又多又乱，所有我们抽象出一个集中处理各种情况的类出来，然后我们收集的时候也只收集这个类的实例，通知也只通知它，然后他自己再去通知其他的，是不是就很方便呢，我们就管他叫watcher。然后再捋一下，vue实际上收集了啥。就是收集了这个watcher，于是就有了熟悉的
回到vue中来捋一下：
Object.defineProperty将属性转为getter/setter 来追踪，读取触发getter 修改触发setter ，在getter中收集有哪些依赖使用了数据，当修改室触发setter是去通知getter中的依赖数据发生了变化，收集的依赖我们存在dep（邮局）中，它来负责收集，删除，和通知依赖。
那么vue其实就是在实例化的时候会去遍历所有的属性创建一个Observer类，Observer类给这些属性添加get和set方法。当外界读取数据的时候就需要走这个getter，于是乎就被收集了起来，当数据变了就去通知这个收集依赖的dep，然后通知到watcher，然watcher就会去通知刚刚读取数据的数据又变了。就引起了视图的更新或者某个回调函数的执行。
就好比你怀疑你老婆搞外遇了，但是为了夫妻感情，你有不能直接出面，万一他没有呢对吧，于是乎，你就找到了你的朋友，让他帮忙盯着你老婆。然后你朋友就把你的电话单独存起来，就帮你盯着你老婆，有一天他发现你老婆去了别的男人家里，你朋友就赶紧来通知你，给你讲你老婆在外面乱搞了。然后你提着你40米大刀一边哭，一遍跑去那个男人家里。
不难看出，你找你朋友这个过程，就相当于取了数据，而你朋友把你的电话存在特殊的电话本里，这个电话本就是dep，而你的朋友显然就是这个watcher了，你的老婆就是这个数据。你取数据产生了依赖被记录再来dep中，你老婆变了触发了setter 给你朋友，你朋友马上通知你说你老婆变了，然后你哭了视图更新了，你提着刀去砍那个男的，走了回调。
这！就是vue的响应式！！
有不当之处欢迎各位大牛指正，一起学习。
浅谈vue 之双向绑定和响应式（vue的响应式）相关推荐
- vue 的双向绑定原理
目录 一.一句话描述 vue 的双向绑定原理 二.细说 vue 的双向绑定原理 1.vue 2.x 的双向绑定 2.vue 3.x 的双向绑定 3.一个完整的案例 一.一句话描述 vue 的双向绑定原 ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue数据双向绑定的原理
vue数据双向绑定的原理 一 复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包 当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
- Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
- 小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- 深入理解vue.js双向绑定的实现原理
vue.js是MVVM(模型到视图和视图到模型)结构的,同类的还有AngularJs:至于MVC.MVP.MVVM的比较网上已经有很多了,这样不再重复.这篇文章将给大家深入的介绍vue.js双向绑定的 ...
- Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- “约见”面试官系列之常见面试题第九篇vue实现双向绑定原理（建议收藏）
目录 1.原理 2.实现 在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫m ...
最新文章
- asterisk 操作mysql
- android菜单和对话栏,Android回顾--(十一) 菜单和对话框
- Swans and ducks, Piešťany, Slovakia
- Array.sort排序
- 继承ListPreference后，去掉右边的图标
- java连接oracle失败_程序连接oracle数据库失败
- LISP 冻结excel窗格_Excel这10个实操技巧，每个都很牛逼，绝对不能错过
- matlab版本下载地址
- 机器人导航，人工势场法的地图导航规划
- css幸运大转盘,用CSS实现一个抽奖转盘
- 小僧尽知他的备细出 水浒
- HDFS ACLs访问控制权限
- Whitelabel Error Page问题解决方案
- 机器学习项目三：XGBoost人体卡路里消耗预测
- php类中遍历中的rewind方法,PHP rewind( )用法及代码示例
- C++虚函数表解析 （Lawliet 修改+注释版）（附有部分网友的重要评论）
- 如何免ROOT卸载手机系统软件
- 把 ALV 转换成 PDF 格式并发送到 SAP Inbox(此段代码未经笔者验证)
- 大智慧专业财务PFFIN(N,M)函数N的取值一览表
- 实用成都幼儿园设计装修案例效果图推荐