Vue.js响应式原理介绍

数据驱动

  • 数据响应式
    • 数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率
  • 双向绑定
    • 数据改变,视图改变;视图改变,数据也随之改变
    • 我们可以使用 v-model 在表单元素上创建双向数据绑定
  • 数据驱动是Vue最独特的特性之一
    • 开发过程中公需要关注数据本身,不需要关心数据是如何渲染到视图

数据响应式原理Vue2

cn.vuejs.org/v2/guide/re…

数据响应式原理Vue3

  • developer.mozilla.org/zh-CN/docs/…
  • 从零实现Vue3.0响应式源码 www.bilibili.com/video/BV1AQ…

观察者模式 和 订阅发布者模式

czp6jx.png

发布订阅模式 – publish-subscribe pattern

订阅者、发布者、信号中心

// 简单实现
// 事件触发器
    class EventEmitter {
      constructor () {
        // { 'click': [fn1, fn2], 'change': [fn] }
        this.subs = Object.create(null)
      }

      // 注册事件
      $on (eventType, handler) {
        this.subs[eventType] = this.subs[eventType] || []
        this.subs[eventType].push(handler)
      }

      // 触发事件
      $emit (eventType) {
        if (this.subs[eventType]) {
          this.subs[eventType].forEach(handler => {
            handler()
          })
        }
      }
    }

    // 测试
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1')
    })
    em.$on('click', () => {
      console.log('click2')
    })

    em.$emit('click')
 

观察者模式

  • 观察者(订阅者) – Watcher
    • update(): 当事件发生时,具体要做的事情
  • 目标(发布者) – Dep
    • subs数组:存储所有的观察者
    • addSub(): 添加观察者
    • notify(): 当事件发生,调用所有观察者的 update() 方法
  • 没有事件中心
// 发布者-目标
    class Dep {
      constructor () {
        // 记录所有的订阅者
        this.subs = []
      }
      // 添加订阅者
      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }
    // 订阅者-观察者
    class Watcher {
      update () {
        console.log('update')
      }
    }

    // 测试
    let dep = new Dep()
    let watcher = new Watcher()

    dep.addSub(watcher)

    dep.notify()
 

解析

cz9V54.png

vue.js

* 功能
    * 负责接收初始化的参数(选项)
    * 负责把 `data` 中的属性注入到 `Vue` 实例,转换成 `getter/setter`
    * 负责调用 `observer` 监听 `data` 中所有属性的变化 
    * 负责调用 `compiler` 解析指/差值表达式
* 结构
    * 属性
        * $options
        * $el
        * $data
    * 方法
        * _proxyData()
 

observer.js

* 功能
    * 负责把 `data` 选项中的属性转换成响应式数据
    * `data` 中的某个属性也是对象,把该属性转换成响应式数据
    * 数据变化发送通知
* 结构
    * 属性
        * 无
    * 方法
        * walk(data)
        * defineReactive(data, key, value)
 


class Observer {
    
    constructor(data) {
        this.walk(data)
    }

    walk(data) {
        // 1. 判断data是否是对象
        if (!data || typeof data != 'object') {
            return
        }
        // 2. 遍历data对象的所有属性
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key])
        })
    }

    defineReactive(obj, key, val) {
        let that = this
        // 如果val是对象,把val内部的属性转换成响应式数据
        this.walk(val)
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get () {
                return val
            },
            set (newValue) {
                if (newValue == val) {
                    return
                }
                val = newValue
                that.walk(newValue)
                // 发送通知
            }
        })
    }
}
 

compiler.js

  • 功能
    • 负责编译模板,解析指令/差值表达 式
    • 负责页面的首次渲染
    • 当数据变化后重新渲染视图
  • 结构
    • 属性
      • el
      • vm
    • 方法
      • compile(el)
      • compileElement(node)
      • compileText(node)
      • isDirective(attrName)
      • isTextNode(node)
      • isElementNode(node)
class Compiler {
  constructor(vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  // 编译模板,处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 处理文本节点
      if (this.isTextNode(node)) {
        this.compileText(node)
      } else if (this.isElementNode(node)) {
        // 处理元素节点
        this.compileElement(node)
      }
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }
  // 编译元素节点,处理指令
  compileElement(node) {
    // 遍历所有的属性节点
    Array.from(node.attributes).forEach(attr => {
      // 判断是否是指令
      let attrName = attr.name
      if (this.isDirective(attrName)) {
        // 将 v-text --> text
        attrName = attrName.substr(2)
        let key = attr.value
        this.update(node, key, attrName)
      }
    })

  }

  update(node, key, attrName) {
    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn(node, this.vm[key])
  }

  // 处理 v-text 指令
  textUpdater(node, value) {
    node.textContent = value
  }
  // 处理 v-model
  modelUpdater(node, value) {
    node.value = value
  } 

  // 编译文本节点,处理差值表达式
  compileText(node) {
    let reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    if (reg.test(value)) {
      let key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])
    }
  }
  // 判断元素属性是否是指令
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  // 判断节点是否是文本节点
  isTextNode(node) {
    return node.nodeType == 3
  }
  // 判断节点是否是元素节点
  isElementNode(node) {
    return node.nodeType == 1
  }
}
 

dep.js

gS30zR.png

class Dep {
  constructor() {
    // 存储所有的观察者
    this.subs = []
  }

  // 添加观察者
  addSub(sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }

  // 发送通知
  notify() {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}


// observer.js
defineReactive(obj, key, val) {
    let that = this
    // 负责收集依赖,并发送通知
    let dep = new Dep()
    // ...
    Object.defineProperty(obj, key, {
      get() {
        // ...
        // 收集依赖
        Dep.target && Dep.addSub(Dep.target)
        return val
      },
      set(newValue) {
        // ...
        // 发送通知
        dep.notify()
      }
    })
  }
 

watcher.js

gS8Hj1.png


class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    // key 是data中的属性名称
    this.key = key;
    // 回调函数负责更新视图
    this.cb = cb

    // 把watcher对象记录到Dep类的静态属性target
    Dep.target = this
    // 触发get方法,在get方法中会调用addSub

    this.oldValue = vm[key]
    Dep.target = null
  }

  // 当数据发生变化 的时候更新视图
  update () {
    let newValue = this.vm[this.key]
    if (this.oldValue == newValue) {
      return
    }
    this.cb(newValue)
  }
}
 

watcher的收集需要在 compiler 当中

  • compileText
// 编译文本节点,处理差值表达式
compileText(node) {
    let reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    if (reg.test(value)) {
      let key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])

      // 创建 watcher
      new Watcher(this.vm, key, (newVal) => {
        node.textContent = newVal
      })
    }
  }
 
  • textUpdatermodelUpdater
// 处理 v-text 指令
  textUpdater(node, value, key) {
    node.textContent = value
    new Watcher(this.vm, key, (newValue) => {
      node.textContent = newValue
    })
  }
  // 处理 v-model
  modelUpdater(node, value, key) {
    node.value = value
    new Watcher(this.vm, key, (newValue) => {
      node.value = newValue
    })
  } 
 

双向绑定

// 处理 v-model
  modelUpdater(node, value, key) {
    node.value = value
    // ...
    // 双向绑定
    node.addEventListener('input', () => {
      this.vm[key] = node.value
    })
  } 
 

总结

gST2WT.png

原创文章,作者:吐槽君,如若转载,请注明出处:https://www.pipipi.net/14648.html

(0)
上一篇 2021年5月26日 下午3:10
下一篇 2021年5月26日 下午3:25

相关推荐

发表评论

登录后才能评论