关于javascript:Evan-You-尤雨溪讲解-vue-源码及高级特性笔记

前言

原视频链接请点击，视频中带你以 vue 开发者的视角来看其中的设计模式及高级个性，且蕴含许多底层实现，强烈推荐。

响应式原理

React

此处特指在前端中如何通过改变state以更新view。

/* 
    React 
*/
let update;
const onStateChange = _update => {
    update = _update;
}
const setState = newState => {
    state = newState;
    update();
}

onStateChange(() => {
    view = render(state);
});
setState({a: 5});

在 React 中咱们规定只能通过setState函数来扭转state，如此一来便能够在每一次state扭转后调用render来更新view。

Vue

在 Vue 中能够间接通过扭转 state 的值来扭转 view，而不用调用 setState 函数。这是通过 Object.defineProperty 劫持对象的setter 和 getter 来实现的。

/*
    Vue
    realState 为真正惟一的状态, 原来的 state 则是它的一个代理
*/
let realState = Object.create(null);
realState = Object.assign(realState,state);
Object.keys(state).forEach(key => {
    Object.defineProperty(state,key,{
        get(){
            return realState[key]
        },
        set(newValue){
            realState[key] = newValue;
            vm = render(realState);
        }
    });
});

依赖

这里先给出课上的一个题目，稍后再探讨在 Vue 的理论使用。

/*
    实现一个 Dep 类,其中蕴含两个办法 depend() 和 notify()。
    另外再实现一个函数 autorun(),承受一个函数 func, 会主动运行func。
    如果在 func 中调用 depend() 办法则会订阅该函数, 调用 notify() 则会运行所有订阅的函数。
*/
let activeUpdate;
function autorun(update){
    function updateWrapper(){  // 设置一个全局变量，这样能够在 depend() 中晓得以后是否正在执行 update 函数。
        activeUpdate = updateWrapper;
        update();
        activeUpdate = null;
    }
    updateWrapper();
}

window.Dep = class Dep{
    constructor(){
        this.stacks = new Set();
    }
    
    depend(){
        if(activeUpdate){
            this.stacks.add(activeUpdate);
        }
    }
    
    notify(){
        this.stacks.forEach(func => func());
    }
}

察看发布者模式

这一步咱们想把后面两步联合起来，咱们心愿实现一个函数 observe ，传入一个对象，劫持它的 getter 和 setter。这样每当咱们调用 getter 时便收集它所有的依赖，而后在 setter 时调用 notify 触发所有的依赖。

function observe(state){
    Object.keys(state).forEach(key => {
        let value = state[key];
        const dep = new Dep();
        Object.defineProperty(state,key,{
            get(){
                dep.depend();
                return value;
            },
            set(newValue){
                value = newValue;
                dep.notify();
            }
        });
    });
}