Vue侦测相关api的实现方法


Posted in Javascript onMay 22, 2019

vm.$watch

用法: vm.$watch( expOrFn, callback, [options] ) ,返回值为 unwatch 是一个函数用来取消观察;下面主要理解 options 中的两个参数 deep 和 immediate 以及 unwatch

Vue.prototype.$watch = function (expOrFn, cb, options) {
  const vm = this
  options = options || {}
  const watcher = new Watcher(vm, expOrFn, cb, options) 
  if(options.immediate) {
    cb.call(vm, watcher,.value)
  }
  return function unwatchFn() {
    watcher.teardown()
  }
}

immediate

从上面代码中可以看出当 immediate 为 true 时,就会直接进行执行回调函数

unwatch

实现方式是:

  1. 将被访问到的数据 dep 收集到 watchs 实例对象上,通过 this.deps 存起来
  2. 将被访问到的数据 dep.id 收集到 watchs 实例对象上,通过 this.depIds 存起来
  3. 最后通过 watchs 实例对象的 teardown 进行删除
class Watcher {
  constructor (vm, expOrFn, cb) {
    this.vm = vm
    this.deps = []
    this.depIds = new Set()
    if(typeof expOrFn === 'function') {
      this.getter = expOrFn
    }else {
      this.getter = parsePath(expOrFn)
    }
    this.cb = cb
    this.value = this.get()
  }
  ....
  addDep (dep) {
    const id = dep.id       //参数dep是Dep实例对象
    if(!this.depIds.has(id)) {  //判断是否存在避免重复添加
      this.depIds.add(id)    
      this.deps.push(dep)
      dep.addSub(this)     //this 是依赖
    }
  }
  teardown () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].removeSub(this)
    }
  }
}
let uid = 0
class Dep {
  constructor () {
    this.id = uid++
    ...
  }
  ...
  depend () {
    if(window.target) {
      window.target.addDep(this)  //将this即当前dep对象加入到watcher对象上
    }
  }
  removeSub (sub) {
    const index = this.subs.indexOf(sub)
    if(index > -1) {
      return this.subs.splice(index, 1)
    }
  }
}

分析

当执行 teardown() 时需要循环;因为例如 expOrFn = function () { return this.name + this.age } ,这时会有两个 dep 分别是 name 与 age 分别都加入了 watcher 依赖( this ),都会加入到 this.deps 中,所以需要循环将含有依赖的 dep 都删除其依赖

deep

需要明白的是

  1. deep 干啥用的,例如 data = {arr: [1, 2, {b: 6]} ,当我们只是监听 data.arr 时,在 [1, 2, {b: 66}] 这个数值内部发生变化时,也需要触发,即 b = 888

怎么做呢?

class Watcher {
  constructor (vm, expOrFn, cb, options) {
    this.vm = vm
    this.deps = []
    this.depIds = new Set()
    if(typeof expOrFn === 'function') {
      this.getter = expOrFn
    }else {
      this.getter = parsePath(expOrFn)
    }
    if(options) {          //取值
      this.deep = !!options.deep
    }else {
      this.deep = false
    }
    this.cb = cb
    this.value = this.get()
  }
  get () {
    window.target = this
    let value = this.getter.call(vm, vm)
    if(this.deep) {
      traverse(value)
    }
    window.target = undefined
    return value
  }
  ...
}
const seenObjects = new Set()
function traverse (val) {
  _traverse(val, seenObjects)
  seenObjects.clear()
}
function _traverse(val, seen) {
  let i, keys
  const isA = Array.isArray(val)
  if((!isA && isObject(val)) || Object.isFrozen(val)) { //判断val是否是对象或者数组以及是否被冻结
    return
  }
  if(val._ob_) {
    const depId = val._ob_.dep.id   //可以看前面一篇我们对Observer类添加了this.dep = new Dep(),所以能访问其dep.id
    if(seen.has(depId)) {
      return
    }
    seen.add(depId)
  }
  if(isA) {
    i = val.length
    while (i--) _traverse(val[i], seen)
  } else {
    keys = Object.keys(val)
    i = keys.length
    while (i--) _traverse(val[i], seen)
  }
}

分析

  1. window.target = this ,寄存依赖
  2. let value = this.getter.call(vm, vm) 访问当前val,并执行 get

的 dep.depend() ,如果发现 val 为数组,则将依赖加入到 observer 的 dep 中,也就实现了对当前数组的拦截

  1. traverse(value) 也就是执行 _traverse(val, seenObjects) ;核心就是对被 Observer 的 val 通过 val[i] 通过这种操作,间接触发 get ,将依赖添加到当前数值的 dep 中,这样也就实现了,当内部数据发生变化,也会循环 subs 执行依赖的 update ,从而触发回调;当是数组时,只需进行遍历,看内部是否有 Object 对象即可,因为在第二步的时候,会对 val 进行判断是否是数组,变改变七个方法的value,在遍历;所以这边只要是内部数组都会进行拦截操作,添加依赖,即对象 {} 这种没没添加依赖。
  2. seenObjects.clear() 当内部所以类型数据都添加好其依赖后,就清空。
  3. window.target = undefined 消除依赖

vm.$set

用法: vm.$set(target, key, value)

作用

  1. 对于数组,进行 set 则是添加新元素,并需要触发依赖更新
  2. 对于对象,如果 key 值存在,则是修改 value ;不存在,则是添加新元素,需新元素要进行响应式处理,以及触发更新
  3. 对于对象本身不是响应式,则直接添加 key-value ,无需处理
Vue.prototype.$set = function (target, key, val) {
  if(Array.isArray(target) && isValidArrayIndex(key)) {  //是数组并且key有效
    target.length = Math.max(target.length, key)  //处理key > target.length
    target.splice(key, 1, val)  //添加新元素,并输出依赖更新同时新元素也会进行`Obsever`处理
    return val
  }
  if(key in targert && !(key in Object.prototype) { //能遍历并且是自身key
    target[key] = val  //触发set,执行依赖更新
    return val
  }
  const ob = target._ob_
  if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)
    //触发警告
    return
  }
  if(!ob) {  //只添加
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val) //进行响应式处理
  ob.dep.notify() //触发依赖更新
  returnv val
}

vm.$delete

用法: vm.$delete( target, key)

作用

  1. 对于数组,进行 delete 则是删除新元素,并需要触发依赖更新
  2. 对于对象,如果 key 值不存在,直接 return ,存在,删除元素,
  3. 对于对象本身不是响应式,则只删除 key-value ,无需其他处理
Vue.prototype.$delete = function (target, key) {
  if(Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = target._ob_
  if(target.isVue || (ob && ob.vm.Count) { //不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)
    //触发警告
    return
  }
  if(!hasOwn(target, key)) {
    return
  }
  delete target[key]
  if(!ob) {
    return
  }
  ob.dep.notify()
}

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

Javascript 相关文章推荐
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
使用node.js搭建服务器
May 20 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
微信小程序系列之自定义顶部导航功能
May 21 #Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 #Javascript
微信小程序websocket实现即时聊天功能
May 21 #Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
taro开发微信小程序的实践
May 21 #Javascript
element-ui表格合并span-method的实现方法
May 21 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
vue实现图片上传功能
2020/05/28 Javascript
对Python中range()函数和list的比较
2018/04/19 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python初学者常见错误详解
2019/07/02 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Django权限控制的使用
2021/01/07 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
个人考核材料
2014/05/15 职场文书
体育专业求职信
2014/07/16 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
班主任先进事迹材料
2014/12/17 职场文书
故宫英文导游词
2015/01/31 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL