资讯专栏INFORMATION COLUMN

vue 源码分析之如何实现 observer 和 watcher

shiina / 2396人阅读

摘要:所以,我们是不是应该写一个消息订阅器呢这样的话,一触发方法,我们就发一个通知出来,然后,订阅这个消息的,就会怎样。。。截止到现在,在我们只考虑最简单情况下。。关于的新文章行代码,理解和分析的响应式架构

本文能帮你做什么?
。。好奇vue双向绑定的同学,
可以部分缓解好奇心
还可以帮你了解如何实现$watch

前情回顾

我之前写了一篇没什么干货的文章。。并且刨了一个大坑。。
今天。。打算来填一天。。并再刨一个。。哈哈
不过话说说回来了.看本文之前,,
如果不知道Object.defineProperty,还必须看看解析神奇的 Object.defineProperty
不得不感慨vue的作者,人长得帅,码写的也好。
本文是根据作者源码,摘取出来的

本文将实现什么

正如上一篇许下的承诺一样,本文要实现一个 $wacth

const v = new Vue({
  data:{
    a:1,
    b:2
  }
})
v.$watch("a",()=>console.log("哈哈,$watch成功"))
setTimeout(()=>{
  v.a = 5
},2000) //打印 哈哈,$watch成功

为了帮助大家理清思路。。我们就做最简单的实现。。只考虑对象不考虑数组

1. 实现 observer

思路:我们知道Object.defineProperty的特性了,
我们就利用它的set和get。。我们将要observe的对象,
通过递归,将它所有的属性,包括子属性的属性,都给加上set和get,
这样的话,给这个对象的某个属性赋值,就会触发set。。嗯。。开始吧

export default class  Observer{
  constructor(value) {
    this.value = value
    this.walk(value)
  }
  //递归。。让每个字属性可以observe
  walk(value){
    Object.keys(value).forEach(key=>this.convert(key,value[key]))
  }
  convert(key, val){
    defineReactive(this.value, key, val)
  }
}


export function defineReactive (obj, key, val) {
  var childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>val,
    set:newVal=> {      
     childOb = observe(newVal)//如果新赋值的值是个复杂类型。再递归它,加上set/get。。
     }
  })
}


export function observe (value, vm) {
  if (!value || typeof value !== "object") {
    return
  }
  return new Observer(value)
}

代码很简单,就给每个属性(包括子属性)都加上get/set,
这样的话,这个对象的,有任何赋值,就会触发set方法。。
所以,我们是不是应该写一个消息-订阅器呢?这样的话,
一触发set方法,我们就发一个通知出来,然后,订阅这个消息的,
就会怎样?。。。对咯。。收到消息。。。触发回调。

2. 消息-订阅器

很简单,我们维护一个数组,,这个数组,就放订阅着,一旦触发notify,
订阅者就调用自己的update方法

export default class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub){
    this.subs.push(sub)
  }
  notify(){
    this.subs.forEach(sub=>sub.update())
  }
}

所以,每次set函数,调用的时候,我们是不是应该,触发notify,对吧。所以
我们把代码补充完整

    export function defineReactive (obj, key, val) {
      var dep = new Dep()
      var childOb = observe(val)
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>val,
        set:newVal=> {
          var value =  val
          if (newVal === value) {
            return
          }
          val = newVal
          childOb = observe(newVal)
          dep.notify()
        }
      })
    }

那么问题来了。。谁是订阅者。。对,是Watcher。。一旦 dep.notify()
就遍历订阅者,也就是Watcher,并调用他的update()方法

3. 实现一个 Watcher

我们想象这个Watcher,应该用什么东西。update方法,嗯这个毋庸置疑,
还有呢,

    v.$watch("a",()=>console.log("哈哈,$watch成功"))

对表达式(就是那个“a”) 和 回调函数,这是最基本的,所以我们简单写写

export default class Watcher {
  constructor(vm, expOrFn, cb) {
    this.cb = cb
    this.vm = vm
    //此处简化.要区分fuction还是expression,只考虑最简单的expression
    this.expOrFn = expOrFn
    this.value = this.get()
  }
  update(){
    this.run()
  }
  run(){
    const  value = this.get()
    if(value !==this.value){
      this.value = value
      this.cb.call(this.vm)
    }
  }
  get(){
    //此处简化。。要区分fuction还是expression
    const value = this.vm._data[this.expOrFn]
    return value
  }
}

那么问题来了,我们怎样将通过addSub(),将Watcher加进去呢。
我们发现var dep = new Dep() 处于闭包当中,
我们又发现Watcher的构造函数里会调用this.get
所以,我们可以在上面动动手脚,
修改一下Object.definePropertyget要调用的函数,
判断是不是Watcher的构造函数调用,如果是,说明他就是这个属性的订阅者
果断将他addSub()中去,那问题来了,
我怎样判断他是Watcherthis.get调用的,而不是我们普通调用的呢。
对,在Dep定义一个全局唯一的变量,跟着思路我们写一下

export default class Watcher {
  ....省略未改动代码....
  get(){
    Dep.target = this
    //此处简化。。要区分fuction还是expression
    const value = this.vm._data[this.expOrFn]
    Dep.target = null
    return value
  }
}

这样的话,我们只需要在Object.definePropertyget要调用的函数里,
判断有没有值,就知道到底是Watcher 在get,还是我们自己在查看赋值,如果
是Watcher的话就addSub(),代码补充一下

export function defineReactive (obj, key, val) {
  var dep = new Dep()
  var childOb = observe(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=>{
      // 说明这是watch 引起的
      if(Dep.target){
        dep.addSub(Dep.target)
      }
      return val
    },
    set:newVal=> {
      var value =  val
      if (newVal === value) {
        return
      }
      val = newVal
      childOb = observe(newVal)
      dep.notify()
    }
  })
}

最后不要忘记,在Dep.js中加上这么一句

Dep.target = null
4. 实现一个 Vue

还差一步就大功告成了,我们要把以上代码配合Vue的$watch方法来用,
要watch Vue实例的属性,算了,,不要理会我在说什么,,直接看代码吧

import Watcher from "../watcher"
import {observe} from "../observer"

export default class Vue {
  constructor (options={}) {
    //这里简化了。。其实要merge
    this.$options=options
    //这里简化了。。其实要区分的
    let data = this._data=this.$options.data
    Object.keys(data).forEach(key=>this._proxy(key))
    observe(data,this)
  }


  $watch(expOrFn, cb, options){
    new Watcher(this, expOrFn, cb)
  }

  _proxy(key) {
    var self = this
    Object.defineProperty(self, key, {
      configurable: true,
      enumerable: true,
      get: function proxyGetter () {
        return self._data[key]
      },
      set: function proxySetter (val) {
        self._data[key] = val
      }
    })
  }
}

非常简单。。两件事,observe自己的data,代理自己的data,
使访问自己的属性,就是访问子data的属性。。
截止到现在,在我们只考虑最简单情况下。。整个流程终于跑通了。。肯定会有
很多bug,本文主要目的是展示整个工作流,帮助读者理解。。
代码在https://github.com/georgebbbb...,
我是一万个不想展示自己代码。。因为很多槽点,还请见谅

下一篇,有两个方向,将聊一聊如何实现双向绑定,或者是如何watch数组。
关于vue2.0的新文章
100行代码,理解和分析vue2.0的响应式架构

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78613.html

相关文章

  • vue源码响应式数据

    摘要:分析是如何实现数据响应的前记现在回顾一下看数据响应的原因之前看了和的源码他们都有自己内部的也就是实例使用的都是的响应式数据特性及所以决定看一下的源码了解是如何实现响应式数据本文叙事方式为树藤摸瓜顺着看源码的逻辑走一遍查看的的版本为目的明确 分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是...

    learn_shifeng 评论0 收藏0
  • Vue源码分析Observer

    摘要:中的观察者模式观察者模式一般包含发布者和订阅者两种角色顾名思义发布者负责发布消息,订阅者通过订阅消息响应动作了。中主要有两种类型的,一种是另外一种是是通过或者中的属性定义的。结束好了,基本结束,如有错漏,望指正。 碎碎念 四月份真是慵懒无比的一个月份,看着手头上没啥事干,只好翻翻代码啥的,看了一会Vue的源码,忽而有点感悟,于是便记录一下。 Vue中的观察者模式 观察者模式一般包含发布...

    CoderBear 评论0 收藏0
  • vue源码分析系列响应式数据(二)

    摘要:巴拉巴拉省略大法,去除无关代码巴拉巴拉省略大法,去除无关代码核心就这一句话。文章链接源码分析系列源码分析系列之环境搭建源码分析系列之入口文件分析源码分析系列之响应式数据一 前言 接着上一篇的初始化部分,我们细看initData中做了什么。 正文 initData function initData (vm: Component) { let data = vm.$options.d...

    CKJOKER 评论0 收藏0
  • 源码解析 —— Vue的响应式数据流

    摘要:下面我们会向大家解释清楚为什么这个这么重要,以及它和的响应式数据流有什么关系。源码前面铺垫这么多就是希望大家能理解接下来要讲的响应式数据流。总结讲到这里大家应该都能够明白的响应式数据流是如何实现的。 Vue、React介绍 目前前端社区比较推崇的框架有Vue 和 React,公司内部许多端都自发的将原有的老技术方案(widget + jQuery)迁移到 Vue / React上了。我...

    LuDongWei 评论0 收藏0
  • vue2.0源码分析理解响应式架构

    摘要:分享前啰嗦我之前介绍过如何实现和。我们采用用最精简的代码,还原响应式架构实现以前写的那篇源码分析之如何实现和可以作为本次分享的参考。到现在为止,我们再看那张图是不是就清楚很多了总结我非常喜欢,以上代码为了好展示,都采用最简单的方式呈现。 分享前啰嗦 我之前介绍过vue1.0如何实现observer和watcher。本想继续写下去,可是vue2.0横空出世..所以 直接看vue2.0吧...

    chenatu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<