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

发表评论

登录后才能评论