vue双向绑定及观察者模式详解


Posted in Javascript onMarch 19, 2019

在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8

1 响应式原理

让我们先从相应式原理开始。我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的。

代码如下

function observe(value, cb) {
 Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive (obj, key, val, cb) {
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   /*....依赖收集等....*/
   /*Github:https://github.com/answershuto*/
   return val
  },
  set:newVal=> {
   val = newVal;
   cb();/*订阅者收到消息的回调*/
  }
 })
}

class Vue {
 constructor(options) {
  this._data = options.data;
  observe(this._data, options.render)
 }
}

let app = new Vue({
 el: '#app',
 data: {
  text: 'text',
  text2: 'text2'
 },
 render(){
  console.log("render");
 }
})

通过observe函数对app.data上的每一个key和value都设定getter和setter。当value改变的时候触发setter,就会触发render这个函数。响应式的目的就达成,如果是视图更新的话我们通过监听dom的input事件来触发数据更新
但是现在我们只有在改变vue._data.text的时候才会触发他们的setter,但是我想偷懒,只改变vue.text就能触发到setter怎么做呢?

我们使用代理的方法

_proxy.call(this, options.data);/*构造函数中*/

/*代理*/
function _proxy (data) {
 const that = this;
 Object.keys(data).forEach(key => {
  Object.defineProperty(that, key, {
   configurable: true,
   enumerable: true,
   get: function proxyGetter () {
    return that._data[key];
   },
   set: function proxySetter (val) {
    that._data[key] = val;
   }
  })
 });
}

依赖收集

让我们再来看看下面的代码

new Vue({
 template: 
  `<div>
   <span>text1:</span> {{text1}}
   <span>text2:</span> {{text2}}
  <div>`,
 data: {
  text1: 'text1',
  text2: 'text2',
  text3: 'text3'
 }
});

当你的text3变化的时候,实际上text3并没有被渲染,但是也会触发一次render函数,这显然是不对的。所以我们需要收集依赖。

我们只需要在初始化的时候渲染一遍,那所有渲染所依赖的数据都会被触发getter,这时候我们只要把这个数据放到一个列表里就好啦!

我们先来认识一下Dep(dependencies)这个类,下图是一个最简单的Dep类。我们可以把他理解为发布者(这点很重要!!)

class Dep {
 constructor () {
  this.subs = [];
 }

 addSub (sub: Watcher) {
  this.subs.push(sub)
 }

 removeSub (sub: Watcher) {
  remove(this.subs, sub)
 }
 /*Github:https://github.com/answershuto*/
 notify () {
  // stabilize the subscriber list first
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update()
  }
 }
}
function remove (arr, item) {
 if (arr.length) {
  const index = arr.indexOf(item)
  if (index > -1) {
   return arr.splice(index, 1)
 }
}

我们每次触发getter的时候,只要把触发的对象放到dep.sub里面就好啦!
但是现在问题来了,我们用什么来装这个触发的'对象',也可以说式订阅者呢?

我们使用Watcher这个类

class Watcher {
 constructor (vm, expOrFn, cb, options) {
  this.cb = cb;
  this.vm = vm;

  /*在这里将观察者本身赋值给全局的target,只有被target标记过的才会进行依赖收集*/
  Dep.target = this;
  /*Github:https://github.com/answershuto*/
  /*触发渲染操作进行依赖收集*/
  this.cb.call(this.vm);
 }

 update () {
  this.cb.call(this.vm);
 }
}

vm即是vue实例, expOrFn就是{{a+b}}里面的a+b, cb就是回调函数就是return a+b, options是一些配置项。

Vue在第一次渲染列表的时候如果碰到{{xxx}}这样的表达式,就会new Watcher()。解析里面的函数,然后把当前的watcher实例赋给Dep.target(Dep.target是全局的,一次性只能有一个存在,因为Vue一次只处理一个依赖)。然后执行回调函数。(这里看似是执行回调函数渲染,其实又触发了一次getter,然后就会把当前的依赖添加到sub里去)

接下来开始依赖收集

class Vue {
 constructor(options) {
  this._data = options.data;
  observer(this._data, options.render);
  let watcher = new Watcher(this, );
 }
}

function defineReactive (obj, key, val, cb) {
 /*在闭包内存储一个Dep对象*/
 const dep = new Dep();

 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: ()=>{
   if (Dep.target) {
    /*Watcher对象存在全局的Dep.target中*/
    dep.addSub(Dep.target);
   }
  },
  set:newVal=> {
   /*只有之前addSub中的函数才会触发*/
   dep.notify();
  }
 })
}

Dep.target = null; //防止依赖重复添加

这儿我们通过示例来讲解

<template>
 <div>
 {{a+b}}
 </div>
 <div>
 {{a-c}}
 </div>
</template>

<script>
let app = new Vue( {
 data :{
  a: 1,
  b: 2,
  c: 3
 }
 })

我们编译到{{a+b}},会去实例化一个对应的Watcher对象,Watcher的构造函数中有这么一句

this.cb.call(this.vm);this.cb指的是function(){return a+b};this.vm指的是这个vue对象,这样就会触发vue.a和vue.b的getter方法,a,b都有自己的dep对象,我们通过Dep.target将这个Watcher对象就加到dep的subs数组中去了,当我们变更a或者b是就会触发setter,进而触发subs数组中的update方法,视图中的a+b就会更新

有个小知识点:我们新建一个属性对象时必须通过Vue.set的方法去实现,而不能直接通过=实现,这样会检测不到,因为我们在初始化时就通过defineProperty重构了这个对象属性的getter和setter方法,新建的属性则没有所以不会被检测到

下图为Vue框架在数据初始化中使用观察者模式的示意图:

vue双向绑定及观察者模式详解

以上所述是小编给大家介绍的vue双向绑定及观察者模式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 #Javascript
在vue中使用G2图表的示例代码
Mar 19 #Javascript
Three.js中矩阵和向量的使用教程
Mar 19 #Javascript
vue+iview动态渲染表格详解
Mar 19 #Javascript
浅谈vue加载优化策略
Mar 19 #Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 #Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
You might like
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python相似模块用例
2016/03/04 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
人事助理岗位职责
2013/11/18 职场文书
大专生的学习自我评价
2013/12/04 职场文书
学生手册家长评语
2014/02/10 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
领导工作表现评语
2015/01/04 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫