简单实现vue中的依赖收集与响应的方法


Posted in Javascript onFebruary 18, 2019

开始

声明一个对象man,可以视为vue中的data

let man = {
 height: 180,
 weight: 70,
 wealth: 100000000
}

添加Observer

作用在于将参数对象的属性变为响应式,只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例,将man作为参数扔进去。这里的proxyData是将man的属性代理到以man为参数的Observer实例上去。

class Observer {
 constructor(obj) {
  this.walk(obj)
 }
 walk(obj) {
  Object.keys(obj).forEach(prop => {
   this[prop] = obj[prop]
   this.proxyData(obj, prop)
   this.defineReactive(this, prop, obj[prop])   
  })
 }
 proxyData(obj, prop) {
  let _this = this
  Object.defineProperty(obj, prop, {
   get() {
    return _this[prop]
   },
   set(newVal) {
    _this[prop] = newVal
   }
  })
 }
 defineReactive(obj, prop, val) {
  Object.defineProperty(obj, prop, {
   get() {
    console.log(`${prop} - 被读取!`)
    return val
   },
   set(newVal) {
    if (newVal == val) return
    val = newVal
    console.log(`${prop} - 被修改!`)
   }
  })
 }
}

new Observer(man)

这时打印一下man

简单实现vue中的依赖收集与响应的方法

现在man的属性都是由Observer实例所对应的属性的getter来返回,只有在查看时会被触发

简单实现vue中的依赖收集与响应的方法

对man的属性进行修改也会触发实例对应属性的setter

简单实现vue中的依赖收集与响应的方法

添加Watcher

现在的Watcher有点像vue中的computed,实际上就是定义一个计算属性,这个计算属性依赖于前面man中的某些属性,由他们计算而得。

class Watcher {
 constructor(obj, prop, computed) {
  this.getVal(obj, prop, computed)
 }

 getVal(obj, prop, computed) {
  Object.defineProperty(obj, prop, {
   get() {
    console.log(`computed属性 - ${prop}被读取!`)
    return computed()
   },
   set() {
    console.error('计算属性不可被修改!')
   }
  })
 }
}

new Watcher(man, 'strength', () => {
 let {height, weight} = man
 if (height > 160 && weight > 70) return 'strong'
 return 'weak'
})

简单实现vue中的依赖收集与响应的方法

看起来没什么问题,所依赖的属性如果变了,计算属性只要再被查看(get方法)一次就可以更新了。但vue中的视图渲染是实时的,视图层依赖于数据层,数据变化了,视图层也会跟着变化,不需要手动更新。类比到这个例子就是计算属性如何才能在其所依赖的属性发生变化时被通知从而触发应有的事件?

这时我们先给Watcher加多一个callback,用于处理当依赖的数据被修改时,我这个计算属性该怎么响应

比如当依赖被修改时,我们就把这个计算属性的值打印出来

class Watcher {
 constructor(obj, prop, computed, callback) {
  this.getVal(obj, prop, computed, callback)
 }

new Watcher(man, 'strength', () => {
 let {height, weight} = man
 if (height > 160 && weight > 70) return 'strong'
 return 'weak'
}, () => {
 console.log(`i am so ${man.strength} !`)
})

一切都准备好了,接下来就是该如何实现?

我们先看下Watcher中getVal这个方法

getVal(obj, prop, computed, callback) {
 Object.defineProperty(obj, prop, {
  get() {
   console.log(`computed属性 - ${prop}被读取!`)
   return computed()
  },
  set() {
   console.error('计算属性不可被修改!')
  }
 })
}

当我们查看计算属性时,会调用computed这个方法,相当于查看了其所依赖的height和weight属性,而在上面我们已经让man的所有属性都拥有了get方法,即他们被查看时我们是不是可以把callback塞给他们?
这时候我们引进一个桥梁,来连接Watcher和Observer。

添加Dep

Dep的用处在于当某一个属性(以下称‘自己')被依赖了,将依赖自己的粉丝(们)--也就是Watcher(s),收集起来,假如自己发生了变化,能够及时通知粉丝们。

class Dep {
 constructor() {
  this.deps = []
 }
 getDeps() {
  if (!Dep.target || this.deps.includes(Dep.target)) return
  console.log('依赖添加', Dep.target)
  this.deps.push(Dep.target)
 }
 notify() {
  this.deps.forEach(dep => {
   dep()
  })
 }
}

这里的Dep.target就是前面所说的callback方法了。这时我们改一下Watcher中的getVal

getVal(obj, prop, computed, callback) {
 Object.defineProperty(obj, prop, {
  get() {
   Dep.target = callback
   console.log(`computed属性 - ${prop}被读取!`)
   return computed()
  },
  set() {
   console.error('计算属性不可被修改!')
  }
 })
}

在计算属性被查看时,将callback赋值给Dep.target,接下来就会调用其所依赖属性的getter,我们只要在getter里把callback给收集起来就行了。接下来修改依赖属性的getter方法。

defineReactive(obj, prop, val) {
 let dep = new Dep()
 Object.defineProperty(obj, prop, {
  get() {
   console.log(`${prop} - 被读取!`)
   dep.getDeps() // 依赖收集
   return val
  },
  set(newVal) {
   if (newVal == val) return
   val = newVal
   console.log(`${prop} - 被修改!`)    
  }
 })
}

这时watcher的callback都被依赖属性给收集起来了,当依赖属性发生变化时只要去运行这些callback就可以了。接下来就是修改依赖属性的setter方法。

defineReactive(obj, prop, val) {
 let dep = new Dep()
 Object.defineProperty(obj, prop, {
  get() {
   console.log(`${prop} - 被读取!`)
   dep.getDeps()
   return val
  },
  set(newVal) {
   if (newVal == val) return
   val = newVal
   console.log(`${prop} - 被修改!`)
   dep.notify() // 运行所有callback
  }
 })
}

运行看看

简单实现vue中的依赖收集与响应的方法

我们加多一个Watcher试试

new Watcher(man, 'isGreat', () => {
 let {height, weight, wealth} = man
 if (height > 180 && weight > 70 && wealth > 100000) return 'Great!'
 return 'not good enough ...'
}, () => {
 console.log(`they say i am ${man.isGreat}`)
})

简单实现vue中的依赖收集与响应的方法

这就是vue中的一个依赖对应多个Watcher

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习历程和心得分享
Dec 12 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
js闭包用法实例详解
Dec 13 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 #Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 #Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 #Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 #Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 #Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 #Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
js实现选项卡效果
2020/03/07 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
基于python socketserver框架全面解析
2017/09/21 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
志愿者服务感言
2014/02/27 职场文书
购房协议书范本
2014/04/11 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
球队口号
2014/06/18 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
教师调动申请报告
2015/05/18 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers