写点什么

Vue 响应式系统原理并实现一个双向绑定

作者:yyds2026
  • 2022-10-19
    浙江
  • 本文字数:5161 字

    阅读完需:约 1 分钟

这一章就着重讲两个点:


  • 响应式系统如何收集依赖

  • 响应式系统如何更新视图 我们知道通过Object.defineProperty做了数据劫持,当数据改变的时候,get方法收集依赖,进而set方法调用dep.notify方法去通知Watcher调用本身update方法去更新视图。那么我们抛开其他问题,就讨论getnotifyupdate等方法,直接上代码:


get( )


  get: function reactiveGetter () {      const value = getter ? getter.call(obj) : val      if (Dep.target) {        dep.depend()        if (childOb) {          childOb.dep.depend()          if (Array.isArray(value)) {            dependArray(value)          }        }      }      return value    }
复制代码


我们知道Dep.target在创建Watcher的时候是null,并且它只是起到一个标记的作用,当我们创建Watcher实例的时候,我们的Dep.target就会被赋值到Watcher实例,进而放入target栈中,我们这里调用的是pushTarget函数:


// 将watcher实例赋值给Dep.target,用于依赖收集。同时将该实例存入target栈中export function pushTarget (_target: ?Watcher) {  if (Dep.target) targetStack.push(Dep.target)  Dep.target = _target}
复制代码


那我们继续执行到if (Dep.target)语句的时候就会调用Dep.depend函数:


 // 将自身加入到全局的watcher中  depend () {    if (Dep.target) {      Dep.target.addDep(this)    }  }
复制代码


那下面的childOb是啥东西呢?


  let childOb = !shallow && observe(val)
复制代码


我们通过这个变量判断当前属性下面是否还有ob属性,如果有的话继续调用Dep.depend函数,没有的话则不处理。我们还需要处理当前传入的value类型,是数组属性的话则会调用dependArray收集数组依赖


// 收集数组依赖function dependArray (value: Array<any>) {for (let e, i = 0, l = value.length; i < l; i++) {  e = value[i]  e && e.__ob__ && e.__ob__.dep.depend()  if (Array.isArray(e)) {    dependArray(e)  }}}
复制代码


那么收集依赖部分到这里就完了现在进行下一步触发更新


set( )


   set: function reactiveSetter (newVal) {      const value = getter ? getter.call(obj) : val      /* eslint-disable no-self-compare */      // 判断NaN的情况      if (newVal === value || (newVal !== newVal && value !== value)) {        return      }      /* eslint-enable no-self-compare */      if (process.env.NODE_ENV !== 'production' && customSetter) {        customSetter()      }      if (setter) {        setter.call(obj, newVal)      } else {        val = newVal      }      childOb = !shallow && observe(newVal)      dep.notify()    }
复制代码


我们看到了下面的 set函数触发了dep.notify()方法


notify( )


  // 通知所有订阅者  notify () {    // stabilize the subscriber list first    const subs = this.subs.slice()    for (let i = 0, l = subs.length; i < l; i++) {      subs[i].update()    }  }}
复制代码


notify里面我们就做了一件事情,遍历subs数组里面的所有Watcher,逐一调用update方法,也就是我们说的通知所有的订阅者Watcher调用自身update方法 update( )


  update () {    if (this.lazy) {      // 计算属性会进来这段代码块      // 这里将dirty赋值为true      // 也不会马上去读取值      // 当render-watcher的update被触发时      // 重新渲染页面,计算属性会重新读值      this.dirty = true    } else if (this.sync) {      this.run()    } else {      queueWatcher(this)    }  }
复制代码


那么 update 方法实现了什么呢?lazydirtysync又是啥?


   if (options) {      this.deep = !!options.deep      this.user = !!options.user      this.lazy = !!options.lazy      this.sync = !!options.sync    } else {      this.deep = this.user = this.lazy = this.sync = false    }    this.cb = cb    this.id = ++uid // uid for batching    this.active = true     // 这里将lazy的值赋值给了dirty    // 就是说实例化的时候dirty = lazy = true    this.dirty = this.lazy // for lazy watchers
复制代码


那是控制计算属性的,当render—watcher的方法update被调用的时候,this.dirty会变为true会重新计算computed值,渲染视图,我们这里不叙述。那么我们直接看queueWatcher()函数:


export function queueWatcher (watcher: Watcher) {const id = watcher.idif (has[id] == null) { has[id] = true if (!flushing) {   queue.push(watcher) } else {   // if already flushing, splice the watcher based on its id   // if already past its id, it will be run next immediately.   let i = queue.length - 1   while (i > index && queue[i].id > watcher.id) {     i--   }   queue.splice(i + 1, 0, watcher) } // queue the flush if (!waiting) {   waiting = true   nextTick(flushSchedulerQueue) }}}
复制代码


我们可以看到一个更新队列,更新队列指向:


function callUpdatedHooks (queue) {  let i = queue.length  while (i--) {    const watcher = queue[i]    const vm = watcher.vm    if (vm._watcher === watcher && vm._isMounted) {      callHook(vm, 'updated')    }  }}
复制代码


参考 vue 实战视频讲解:进入学习


我们的callback调用updated钩子讲到这里就有点超纲了,咱们初始化渲染会调用一个initRender函数创建dom,还有上面所述的nextTick,后期都会讲,那么了解了更新机制,下一章我们就来实现一个让面试官都惊呆了双向绑定


我们对Vue响应式系统有一定的了解,并且知道它是如何实现数据更新视图视图改变数据的,那么有这样的基础,我们来手写一个MVVM,以便面试的时候,吊打面试官(此为笑谈,不足论,嘿嘿)。那么先抛出一张在座的各位再也熟悉不过的图:



1、当我们new MVVM之后有两步操作,Observer,Compile,我们知道Observer是做数据劫持,Compile是解析指令,那么问题来了:


  • Observer为什么要做数据劫持?

  • Compile为什么要做解析指令?带着这两个问题,我们回顾一下往期内容:

  • 什么是数据响应式

  • 数据响应式原理是什么?

  • 数据响应式是如何实现的?


数据响应式就是数据双向绑定,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新;如果用户更新了View,那么Model数据也被自动更新了,这种情况就是双向绑定。


数据响应式原理


  • Vue实现数据响应式原理就是通过Object.defineProperty()这个方法重新定义了对象获取属性值get设置属性值set的操作来实现的

  • Vue3.0中是通过ECMAScript6中的proxy对象代理来实现的。那么本章节就是来实现数据响应式的。


那么回答前面的两个问题,为什么要劫持数据?为什么要解析指令


  • 只有劫持到数据,才能对数据做到监听,以便于数据更改能够及时做到更新视图。

  • Vue中自定义了N多指令,只有解析它,我们JavaScript才能认识它,并运行它。诸如此类问题我们不再复述,下面开始实现数据响应式。


写一个demo之前,我们应当整理好思路:


1. 首先实现整体的一个架构(包括MVVM类或者VUE类、Watcher类),   /这里用到一个订阅发布者设计模式。2. 然后实现MVVM中的由M到V,把模型里面的数据绑定到视图。3. 最后实现V-M, 当文本框输入文本的时候,由文本事件触发更新模型中的数据4. 同时也更新相对应的视图。
复制代码


//html代码<div id="app">      <h1>MVVM双向绑定</h1>      <div>        <div v-text="myText"></div>        <div v-text="myBox"></div>        <input type="text" v-model="myText" />        <input type="text" v-model="myBox" />      </div></div>

复制代码


我们创建了两个divinput实现input框数据关联,说白了也就是相同的数据源,那我们的数据源在哪呢?


//数据源dataconst app = new Vue({        el: "#app",        data: {          myText: "大吉大利!今晚吃鸡!",          myBox: "我是一个盒子!",        },});
复制代码


可见我们需要一个Vue类,也就是一个发布者,那么直接上代码:


//Vue类(发布者)class Vue{
}
复制代码


发布者有了,我们还需要有订阅者:


//Watcher类(订阅者)class Watcher{
}
复制代码


可见两者都有了,那么我们该怎么实现呢?


  • 获取 data 数据

  • 获取元素对象

  • 构造一个存放订阅者的对象


 class Vue {        constructor(optios) {          this.$data = optios.data; //获取数据          this.$el = document.querySelector(optios.el); //获取元素对象          this._directive = {}; // 存放订阅者        } }       
复制代码


那么我们说了,我们需要劫持数据解析指令,那么我们得构造两个方法。


   class Vue {       constructor(optios) {         this.$data = optios.data; //获取数据         this.$el = document.querySelector(optios.el); //获取元素对象         this._directive = {}; // 存放订阅者         this.Observer(this.$data);         this.Compile(this.$el);       }       //劫持数据       Observer(data) {           Object.defineProperty(this.$data, key, {             get: function(){},             set: function(){}             },           });       }       //解析指令   //视图 --- >对象 -- >指令       Compile(el) {
} }
复制代码


一个是劫持数据,一个是解析元素指令,劫持到的属性要根据属性分配容器,当当前容器不存在该属性的时候,我们便需要把他添加到订阅器对象里面,等待通知更新。


  for (let key in data) {          this._directive[key] = [];          let val =data[key];          let watch = this._directive[key];  }
复制代码


那么解析指令,首先必须要递归当前节点,是否还有子节点,是否有v-text指令,v-model指令。


       let nodes = el.children;          for (let i = 0; i < nodes.length; i++) {            let node = nodes[i];            //递归 查询所有当前对象子类是否再含有子类            if (node.children.length) {              this.Compile(nodes[i]);            }            //判断是否含有V-text指令            if (node.hasAttribute("v-text")) {              let attrVal = node.getAttribute("v-text");
this._directive[attrVal].push( new Watcher(node, this, "innerHTML", attrVal) ); }
//判断是否含有V-model指令 if (node.hasAttribute("v-model")) { let attrVal = node.getAttribute("v-model");
this._directive[attrVal].push( new Watcher(node, this, "value", attrVal) ); node.addEventListener("input", () => { //赋值到模型 this.$data[attrVal] = node.value; // console.log(this.$data); }); } }
复制代码


那么我们触发更新时候需要收集依赖,我们直接吧收集到的依赖return出去


 Object.defineProperty(this.$data, key, {              get: function(){                    return val;              } }
复制代码


那么我们订阅者长什么样呢?我们订阅者,接收当前元素信息,MVVM 对象,标识,属性。并且需要构造一个更新方法update


    class Watcher {        constructor(el, vm, exp, attr) {          this.el = el;          this.vm = vm;          this.exp = exp;          this.attr = attr;          this.update();        }        //更新视图        update() {          this.el[this.exp] = this.vm.$data[this.attr];          //div.innerHTML/value = this.Vue.$data["myText/myBox"]        }    }
复制代码


到这里已经快完成了,那么我们收集了依赖就要去,通知 watcher 去更新视图啊,那么来了:


    Object.defineProperty(this.$data, key, {              get: function(){                    return val;              },              set: function(newVal){                  if(newVal !== val){                    val = newVal;                    watch.forEach(element => {                        element.update();                      });                  }              },    });
复制代码


做到这里,你就可以实现一个数据响应式了。




我们已经掌握了响应式原理,那我们开始着手 Vue 的另一个核心概念组件系统


用户头像

yyds2026

关注

还未添加个人签名 2022-09-08 加入

还未添加个人简介

评论

发布
暂无评论
Vue响应式系统原理并实现一个双向绑定_Vue_yyds2026_InfoQ写作社区