Vue响应式原理（手写源码）

前言：

本文依照上一篇文章为基础进行书写，可先看上一篇开发环境的搭建后再来看本文章。链接：博客园

什么是响应式？

　　简单的来说就是更改数据的时候，视图也会更新。

　　vue是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。

1.vue响应式原理

　　1.导出vue构造函数

import {initMixin} from './init';

function Vue(options) {
    this._init(options);
}

initMixin(Vue); // 给原型上新增_init方法

export default Vue;

　　2.init方法中初始化vue状态

import {initState} from './state';

export function initMixin(Vue){

    Vue.prototype._init = function (options) {
        const vm  = this;
        vm.$options = options
        // 初始化状态
        initState(vm)
    }
}

　　根据不同属性进行初始化操作

export function initState(vm){
    const opts = vm.$options;

　　　// 判断里面有哪些数据，并进行初始化

// 如 props, data, methods, computed, watch... 　　　if (opts.props){

        initProps(vm);
    }
　　
    if(opts.methods){
        initMethod(vm);
    }
    if(opts.data){
        // 初始化data
        initData(vm);
    }
    if(opts.computed){
        initComputed(vm);
    }
    if(opts.watch){
        initWatch(vm);
    }
}
function initProps(){}
function initMethod(){}
function initData(vm){

　　// 数据响应式原理

let data = vm.$options.data; // 用户传入的数据

// vm._data 就是检测后的数据了

data = vm._data = typeof data === 'function' ? data.call(vm) : data;

// 观测数据

observe(data); // 观测这个数据

}
function initComputed(){}
function initWatch(){}

　　3.初始化数据

import {observe} from './observer/index.js'

function initData(vm){
　　　//用户传递过来data中的数据

    let data = vm.$options.data;
　　//vm._data 就是监测后的数据

    data = vm._data = typeof data === 'function' ? data.call(vm) : data;
　　// 观测数据
    observe(data);
}

　　4.递归属性劫持

class Observer { // 观测值
    constructor(value){
        this.walk(value);
    }
    walk(data){ // 让对象上的所有属性依次进行观测
        let keys = Object.keys(data);
        for(let i = 0; i < keys.length; i++){
            let key = keys[i];
            let value = data[key];
            defineReactive(data,key,value);
        }
    }
}
function defineReactive(data,key,value){
    observe(value);
    Object.defineProperty(data,key,{
        get(){
            return value
        },
        set(newValue){
            if(newValue == value) return;
            observe(newValue);
            value = newValue
        }
    })
}
export function observe(data) {
　　// 判断data是不是对象，当null为空是也是返回object

if(typeof data !== 'object' && data != null){
        return;
    }
    return new Observer(data);
}

　　上面通过打印可以查看到data中的属性都添加了get和set属性，实现更新

　　5.数组方法的劫持

import {arrayMethods} from './array';
class Observer { // 观测值
    constructor(value){

　　　　// 对数组索引进行拦截性能差而且直接更改索引的方式并不多

Object.defineProperty(data,'__ob__',{ // __ob__ 是一个响应式饿表示对象数组都有

enumerable:false, // 不可枚举

configurable:false,

value:this

})

// data.__ob__ = this; // 相当于在数据上可以获取到__ob__这个属性指代的是Observer的实例

if(Array.isArray(data)){

// vue如何对数组进行处理呢？数组用的是重写数组的方法函数劫持

// 改变数组本身的方法我就可以监控到了

data.__proto__ = arrayMethods; // 通过原型链向上查找的方式

// [{a:1}] => arr[0].a = 100

this.observeArray(data);

}else{

this.walk(data); // 可以对数据一步一步的处理

}

    }
    observeArray(value){
        for(let i = 0 ; i < value.length ;i ++){
            observe(value[i]);
        }
    }
}

　　重写数组原型方法

let oldArrayProtoMethods = Array.prototype;
export let arrayMethods = Object.create(oldArrayProtoMethods);
let methods = [
    'push',
    'pop',
    'shift',
    'unshift',
    'reverse',
    'sort',
    'splice'
];
methods.forEach(method => {
    arrayMethods[method] = function (...args) {
        const result = oldArrayProtoMethods[method].apply(this, args);
        const ob = this.__ob__;
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
            case 'splice':
                inserted = args.slice(2)
            default:
                break;
        }
        if (inserted) ob.observeArray(inserted); // 对新增的每一项进行观测
        return result
    }
})

　　增加__obo__属性

class Observer { 
    constructor(value){
        Object.defineProperty(value,'__ob__',{
            enumerable:false,
            configurable:false,
            value:this
        });
        // ...
    }
 }

　　给所有响应式数据增加标识，并且可以在响应式上获取Observer实例上的方法；

　　最后附上码云地址：链接

　　每天学习一点，记录一点...