手写一个数据响应式函数

• 目的：当数据改变时，要能监听到数组或对象上值的改变，并且进行自己的操作。
• demo：index.js文件的简单使用为示例：

// 引入observe函数 与 Watcher 工具类（类似于vue.$Watch()）
import observe from './my-reactive/observe'
import Watcher from './my-reactive/Watcher'
let obj = {
    a: {
        m: {
            n: 999
        }
    },
    b: '666',
    c:[1,2,3,4,5]
}
// 监听与调用
observe(obj)
new Watcher(obj, 'a.m.n', (val)=>{
    console.log("😔", val);
})
// 改变对象和数组
obj.c.splice(2,1,88,99)
obj.a.m.n = 10000

创建oberve侦察函数

import Observer from "./Observer"

// 创建oberve侦察函数
export default function observe(val) {
    if (typeof val !== 'object') return
    let ob
    if (typeof val.__ob__ !== 'undefined') {
        ob = val.__ob__
    } else {
        ob = new Observer(val)
    }
    return ob
}

Observer类

循环递归对象的属性 将一个正常的obj转换成为每一个层级的属性都是响应式的（都可以被侦测的）obj

import defineReactive from "./defineReactive"
import { arrayMethods } from './array'
import observe from "./observe";
import Dep from "./Dep";

function def(obj, key, value, enumerable) {
    Object.defineProperty(obj, key, {
        value,
        enumerable,
        writable: true,
        configurable: true,
    })
}

export default class Observer {
    constructor(value) {
        // 每一个Observer的实例上 都会有一个dep
        this.dep = new Dep()
        // this是Oberver类的实例，不是类本身
        def(value, '__ob__', this, false)
        // 检查是数组还是对象
        if (Array.isArray(value)) {
            Object.setPrototypeOf(value, arrayMethods)
            // 让这个数组进行observe
            this.observeArray(value)
        } else {
            this.walk(value)
        }
    }
    walk(value) {
        for (const k in value) {
            defineReactive(value, k)
        }
    }
    observeArray(arr){
        for (let i = 0; i < arr.length; i++) {
            // 逐项去observe
            observe(arr[i])
        }
    }
}

defineReactive

创建一个可以使用外部变量的闭包函数，包含了Object.defineProperties的核心功能

import observe from "./observe";
import Dep from "./Dep";
export default function defineReactive(data, key, val) {
    // 每个层级的__ob__属性上都有一个dep: Dep {}
    const dep = new Dep()
    if (arguments.length == 2) {
        val = data[key]
    }
    // 子元素要进行observe，至此形成了循环递归
    let childOb = observe(val)
    Object.defineProperty(data, key, {
        // 可被枚举
        enumerable: false,
        // 一些可配置的属性
        configurable: true,
        // getter 收集依赖
        get() {
            if (Dep.target) {
                dep.depend()
                if (childOb && childOb.length) {
                    childOb.dep.depend()
                }
            }
            return val
        },
        // setter 数据劫持
        set(newVal) {
            if (val === newVal) return
            val = newVal
            // 当设置了新值，这个值也要被observe
            childOb = observe(newVal)
            // 观察者模式 
            dep.notify()
        }
    })
}

Dep类

使用发布订阅的广播模式，用来管理依赖
dep.depend()
dep.notify()

let uid = 0
export default class Dep{
    constructor(){
        // 这个数组里放的是watcher的实例
        this.id = uid++
        this.subs = []
    }
    // 添加订阅
    addSub(sub){
        this.subs.push(sub)
    }
    // 添加依赖
    depend(){
        if (Dep.target) {
            this.addSub(Dep.target)
        }
    }
    // 通知更新
    notify(){
        console.log('dep类 notify方法');
        // 浅拷贝一份subs
        const subs = this.subs.slice()
        // 遍历
        for (let i = 0; i < subs.length; i++) {
            subs[i].update()
        }

    }
} 

watcher类

是一个中介，数据发生变化的时候通过watcher中转，通知组件更新

import Dep from "./Dep"
let uid = 0
// 闭包 函数柯里化 高阶函数
function parsePath(str) {
    let strArr = str.split('.')
    return (obj) => {
        for (let i = 0; i < strArr.length; i++) {
            if (!obj) return
            obj = obj[strArr[i]]
        }
        return obj
    }
}
export default class Watcher {
    constructor(target, expression, callback) {
        console.log('Watcher类的依赖收集器');
        this.id = uid++
        this.target = target
        this.getter = parsePath(expression)
        this.callback = callback
        this.value = this.get()
    }
    update() {
        this.run()
    }
    get() {
        // 进入依赖收集
        Dep.target = this
        const obj = this.target
        let value
        try {
            value = this.getter(obj)
        } catch (error) {
            console.log('Watcher 报错：', error);
        } finally {
            Dep.target = null
        }
        return value
    }
    run() {
        this.getAndInVoke(this.callback)
    }
    getAndInVoke(cb) {
        const value = this.get()
        if (value !== this.value || typeof value == 'object') {
            const oldValue = this.value
            this.value = value
            cb.call(this.target, value, oldValue)
        }
    }
} 

重点：ArrayMethod

• 改写7个方法，原来的方法在Array.prototype上
• vue当中数组的响应侦测是如何实现的？以arrayPrototype为原型，创建了arrayMethords的对象,使用了Object.setPrototypeOf()改写了七个数组的方法

function def(obj, key, value, enumerable) {
    Object.defineProperty(obj, key, {
        value,
        enumerable,
        writable: true,
        configurable: true,
    })
}
// 得到Array的原型对象
const arrayPrototype = Array.prototype

// 以arrayPrototype为原型，创建了arrayMethords的对象, 并暴露
export const arrayMethods = Object.create(arrayPrototype)

// 要改写的7个方法
const methodNeedChange = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'revert'
]

// 遍历 并把改写的方法添加到自己的原型上
methodNeedChange.forEach(item => {
    // 备份原来的方法
    const OriginalMethod = arrayPrototype[item]
    // 定义新的方法
    def(arrayMethods, item, function()  { // 这里不能用箭头函数，当前this指向的是传入的这个数组本身 [2, 3, 4, 5]
        // 恢复原来的功能
        const result =  OriginalMethod.apply(this, arguments)
        // arguments是类数组对象 需要转变为数组 才能使用数组的slice等方法
        const args = [...arguments]
        let insertArr = []
        switch (item) {
            case 'push':
            case 'unshift':
                insertArr = args
                break;
            case 'splice':
                insertArr = args.slice(2)
        }
        // 让新项也变为可响应的
        const ob = this['__ob__']
        if (insertArr.length>0) {
            ob.observeArray(insertArr)
        }
        // 让数组也有notify方法
        ob.dep.notify()
        return result

    }, false)
})