vuejs知乎_vueJS （简版）amp; 响应式原理

Vue简版源码 & 响应式原理（学习途径：拉钩教育）

一、基本原理

vue响应式的基本原理：使用 Object.defineProperty 做数据劫持，并在 set 时通知观察者更新视图变化。

二、分析

通过观察和分析 Vue对象，可以得出以下几条初始化要做的事情 * vue 初始化时 options 内的 data 对象的属性被注册到了 vue 对象下，并转换成了 getter 和 setter（方便通过 this.msg 使用数据），并将 data 注册到 $data 下，转换成 getter 和 setter （数据劫持） * options 被注入到对象的 $options 属性下 * vue 初始化时 options内的 el 被转换成dom对象，注入到对象的 $el 下 * 将 methods 下的方法注册到 vue 对象下 * 解析 v-on、v-html、v-text、v-model 等指令

在此示例中只作这四种指令的解析（声明周期钩子的方法处理，后续还会再完善）

三、简单 Vue 实现

#### Vue类实现
/*** Vue 对象入口* 核心逻辑：*  1. 将 this.$data 内的成员添加到vue实例下，添加getter和setter属性*  2. 将 this.$data 添加getter和setter属性，监听变化*  3. 解析 this.$el 内元素*  4. 将 methods内方法注册到vue对象下*/
class Vue {constructor(options) {// 初始化 & 保存配置及属性this.$options = options || {}this.$data = options.data || {}this.$methods = options.methods || {}this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el// 将methods内方法，注入到vue实例内this._addMethods(this.$methods)// 将data中的成员转换成getter和setter，注入到vue实例中this._proxyData(this.$data)// 将 this.$data 转换成 get & set 监听数据变化new Observer(this.$data)// 调用compiler对象，解析指令和差值表达式new Compiler(this)}_addMethods(methods) {Object.keys(methods).forEach(key => {this[key] = methods[key]})}_proxyData(data) {Object.keys(data).forEach(key => {Object.defineProperty(this, key, {get() {return data[key]},set(newVal) {if(newVal === data[key]) {return}data[key] = newVal}})})}
}

解析：

在 vue 类的 constructor 构造方法中，首先实现了 vue实例对 $options、$data、$methods、$el 的初始化
调用 _addMethods 方法，将 methods 内方法，注入到vue实例内
调用 _proxyData 方法，将 data 中的成员转换成 getter 和 setter ，注入到vue实例中
调用 Observer 对象，将 this.$data 转换成 get & set 监听数据变化
调用 Compiler 对象，解析指令和差值表达式

注意：this._proxyData(this.$data) 这里传递的是 this.$data 的原因是在 get 或 set vue实例下数据的时候可以触发 this.$data 下的数据的 getter 和 setter 方法 （this.$data 将在 Observer 类中完成数据劫持处理）

在此类中只做初始化及功能调用工作，其他功能将拆分模块进行调用，接下来我们看 Observer 类（数据劫持）

Observer 类实现

/*** Observer* 将data内所有对象的属性添加getter和setter监听* walk：当前值是对象添加遍历其属性，调用 defineReactive 方法处理* defineReactive：处理当前对象的key，添加getter和setter监听，对每一项key的value再次调用walk方法，如果是对象则继续递归此流程*/
class Observer {constructor(data) {this.walk(data)}walk(data) {// 不存在或者不是一个对象if(!data || typeof data !== 'object') {return}Object.keys(data).forEach(key => {this.defineReactive(data, key, data[key])})}defineReactive(obj, key, val) {const that = thislet dep = new Dep()// 当前val是对象-递归this.walk(val)// this.$data内的数据转化监听Object.defineProperty(obj, key, {get() {Dep.target && dep.addSub(Dep.target)return val},set(newVal) {if (newVal === val) {return}val = newVal// 改变之后的值时对象，递归监听that.walk(newVal)dep.notify()}})}
}

解析：

在vue的 constructor 构造方法内使用了 Observer 类，初始化传递了一个对象，即 vue内的响应式对象；
当前类功能是将data内所有对象的属性添加getter和setter监听
walk方法负责判断当前传递过来的数据是否是对象，如果是遍历处理每一个 key 调用 defineReactive 方法
defineReactive 方法负责将传递过来的key转换成getter和setter（这里有个坑稍后统一说明）
通过在 defineReactive 方法内调用 walk方法传递value进行递归调用，实现 $data 下全部层级数据的数据劫持
在 defineReactive 方法内所使用的 Dep 类就是我们实现数据响应式的发布对象，在 getter 方法内收集依赖即订阅者，在setter 方法内调用 dep(发布者)的 notify 方法通知订阅者更新视图；（收集逻辑在后边会有讲到，后续会有说明）

注意：如果将 return val 换成 obj[key], 则还会触发get方法，会循环调用产生死递归，所以这里需要将 val 也传递给 defineReactive方法

在此类中我们完成了针对 this.$data 的数据劫持，接下来我们看 Compiler 类（指令解析）

Compiler 类实现

/*** Compiler* compile：递归遍历 el下所有节点，根据节点类型进行不同逻辑处理* compileText：处理文本节点*   文本节点匹配 {{ msg }} 初始化替换 && 添加观察者* compileElement：处理元素节点*   元素节点匹配指令 通过不同的指令完成 初始化替换 && 添加观察者* onMethods 通过字符串的拼接，完成不同v-on指令处理方法的调用*    on + click/change 等内部实现了 初始化替换 && 添加观察者* update：通过字符串的拼接，完成不同v-指令处理方法的调用*    text/module + Updater 内部实现了 初始化替换 && 添加观察者** isMethods 判断 methods是否存在 （工具方法）* isDirective：判断是否是指令（工具方法）* isTextNode：判断是否是文本节点（工具方法）* isElementNode：判断是否是元素节点（工具方法）*/
class Compiler {constructor(vm) {this.vm = vmthis.el = vm.$elthis.compile(this.el)}// 遍历子节点compile(el) {Array.from(el.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)}})}// 处理文本节点compileText(node) {let reg = /{{(.+?)}}/let value = node.textContentif(reg.test(value)) {// 获取差值表达式的keylet key = RegExp.$1.trim()node.textContent = value.replace(reg, this.vm[key])new Watcher(this.vm, key, (newValue) => {node.textContent = newValue})}}// 处理元素节点compileElement(node) {Array.from(node.attributes).forEach(attr => {// 指令名称 eg:v-modulelet attrName = attr.nameif(this.isDirective(attrName)) {if (attrName.startsWith("v-on:")) {attrName = attrName.substr(5)let funcName = attr.valuethis.onMethods(node, funcName, attrName)} else if(attrName.startsWith("v-")) {attrName = attrName.substr(2)// 绑定字段名 msglet key = attr.valuethis.update(node, key, attrName)}}})}/*** v-on 标签处理* @param node* @param funcName* @param attrName*/onMethods(node, funcName, attrName) {let updateFn = this['on' + attrName]updateFn && updateFn.call(this, node, funcName, attrName)}/*** v-on:click* @param node* @param funcName* @param attrName*/onclick(node, funcName, attrName) {// 是 methods内方法，给当前node节点绑定事件，传递一个 e 的参数（当前节点node）if (this.isMethods(funcName)) {node.addEventListener(attrName, this.vm[funcName].bind(this.vm, node))} else {// 不是 methods内方法，给当前node节点绑定事件，内部直接执行当前字符串表达式node.addEventListener(attrName, () => {try {eval(funcName)} catch (e) {throw Error(funcName + ' is not defined')}})}}// 合并请求方法update(node, key, attrName) {let updateFn = this[attrName + 'Updater']updateFn && updateFn.call(this, node, this.vm[key], key)}// v-text 属性处理textUpdater(node, value, key) {node.textContent = valuenew Watcher(this.vm, key, (newValue) => {node.textContent = newValue})}// v-model 属性处理modelUpdater (node, value, key) {node.value = valuenew Watcher(this.vm, key, (newValue) => {node.value = newValue})// 双向绑定node.addEventListener('input', () => {this.vm[key] = node.value})}// v-html 属性处理htmlUpdater (node, value, key) {node.innerHTML = valuenew Watcher(this.vm, key, (newValue) => {node.textContent = newValue})}// 判断methodsisMethods(key) {return this.vm[key] !== undefined}// 判断属性指令isDirective(attrName) {return attrName.startsWith('v-')}// 文本节点isTextNode(node) {return node.nodeType === 3}// 元素节点isElementNode(node) {return node.nodeType === 1}
}

解析：

compile：递归遍历 el下所有节点，根据节点类型进行不同逻辑处理
compileText：处理文本节点；文本节点匹配 {{ msg }} 初始化替换 && 添加观察者
compileElement：处理元素节点元素节点匹配指令通过不同的指令完成初始化替换 && 添加观察者
onMethods 通过字符串的拼接，完成不同v-on指令处理方法的调用 on + click/change 等内部实现了初始化替换 && 添加观察者
update：通过字符串的拼接，完成不同v-指令处理方法的调用 text/module + Updater 内部实现了初始化替换 && 添加观察者
isMethods 判断 methods是否存在（工具方法）
isDirective：判断是否是指令（工具方法）
isTextNode：判断是否是文本节点（工具方法）
isElementNode：判断是否是元素节点（工具方法）

1. 在处理 元素节点 onclick 方法中，判断当前传入的 funcName 是否是挂载在 vue实例上的 methods 方法Y： node.addEventListener(attrName, this.vm[funcName].bind(this.vm, node)) 注意方法内 this 需要指向当前vue实例N： 在回调内使用 eval(funcName) 执行当前字符串
2. 在处理 指令初始化绑定数据的时候new Watcher(this.vm, key, (newValue) => {node.textContent = newValue})都会使用 Watcher 创建 订阅者对象，并且传入vue实例、当前改变数据名、回调函数（更新视图）

所以接下来我们进入 Watcher 类

Watcher 类实现

/*** 观察者：Watcher* 核心逻辑：*  1. Dep.target指向当前Watcher对象*  2. 在 this.oldValue = vm[key] 的时候，调用getter方法，在getter方法内将 当前 Watcher 当前key的Dep对象的addSub方法 （收集观察者）*  3. Dep.target 置空* update方法：当不更新数值和原始数值不同的时候，调用创建时候的回调更新视图*/
class Watcher {constructor(vm, key, cb) {this.vm = vmthis.key = keythis.cb = cbDep.target = thisthis.oldValue = vm[key]Dep.target = null}update() {let newValue = this.vm[this.key]if(this.oldValue === newValue) {return}this.cb(newValue)}
}

核心逻辑

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

让 Dep.target 指向当前 watcher 观察者对象
在调用 this.oldValue = vm[key] 的时候，由于 vm[key] 会触发 getter 事件，并且在 getter 事件的 Dep.target && dep.addSub(Dep.target) 会将调用dep的 addSub 方法收集当前 watcher 对象
将 Dep.target 置空
update 方法：判断数据是否发生改变，并且调用 cb 方法更新视图

在核心逻辑中调用了 Dep 对象，进行观察者收集，所以接下来看 Dep 类

Dep 类实现

/*** 发布对象 Dep* subs 观察者列表* addSub(sub, sub.update) 添加观察者到当前对象subs列表* notify() 发布消息，遍历subs列表，所有订阅者调用update方法执行，通知订阅者更新视图*/
class Dep {constructor() {this.subs = []}addSub(sub) {if(sub && sub.update) {this.subs.push(sub)}}notify() {this.subs.forEach(sub => {sub.update()})}
}

解析：

subs 观察者列表
addSub(sub, sub.update) 添加观察者到当前对象subs列表
notify() 发布消息，遍历subs列表，所有订阅者调用update方法执行，通知订阅者更新视图

-----------------------------------------代码结束-----------------------------------------

数据驱动视图改变逻辑

发布对象 Dep 在 Compiler 对象在 this.$data 转换 getter 和setter 的时候创建；在Compiler 内创建观察者 Watcher 的时候，由 Watcher 的构造函数内的 vm[key] 触发数据get方法，并在get方法内调用 dep 的 addSub 方法将当前观察者对象添加到 发布者 subs 列表内；当 this.$data数据触发 set 的时候，调用当前数据发布者 dep.notify 方法，遍历 subs 内的 watcher 观察者，调观察者对象的 update 方法，执行在 Compiler  内创建的时候传递的更新视图的方法，更新视图;

视图改变驱动数据改变

// 双向绑定
node.addEventListener('input', () => {this.vm[key] = node.value
})
在 Compiler类 处理 v-module 的方法内，对 node 节点绑定input事件监听，更新数据

逻辑梳理

四、收获&知识点

1、发布者-观察者模式

1 观察者：Watcher
update() 此方法在观察者实例方法notify中被调用发布者：Dep
2 subs：观察者数组
addSub()：为发布者收集观察者
notify()：循环subs 观察者数组，调用观察者update()方法3 代码中为每一个属性的dep 收集watcher的方式

2、apply、call、bind 区别和使用

以上代码中使用到了call 和bind方法，其作用是：改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

而两者的区别则是：bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

bind方法使用

/*** v-on:click* @param node* @param funcName* @param attrName*/onclick(node, funcName, attrName) {// 是 methods内方法，给当前node节点绑定事件，传递一个 e 的参数（当前节点node）if (this.isMethods(funcName)) {node.addEventListener(attrName, this.vm[funcName].bind(this.vm, node))} else {// 不是 methods内方法，给当前node节点绑定事件，内部直接执行当前字符串表达式node.addEventListener(attrName, () => {try {eval(funcName)} catch (e) {throw Error(funcName + ' is not defined')}})}}

call方法使用

 /*** v-on 标签处理* @param node* @param funcName* @param attrName*/onMethods(node, funcName, attrName) {let updateFn = this['on' + attrName]updateFn && updateFn.call(this, node, funcName, attrName)}