【Vue源码学习】响应式原理探秘

最近准备开启Vue的源码学习，并且每一个Vue的重要知识点都会记录下来。我们知道Vue的核心理念是数据驱动视图，所有操作都只需要在数据层做处理，不必关心视图层的操作。这里先来学习Vue的响应式原理，Vue2.0的响应式原理是基于Object.defineProperty来实现的。Vue通过对传入的数据对象属性的getter/setter方法来监听数据的变化，通过getter进行依赖收集，setter方法通知观察者，在数据变更时更新视图。

1.使用rollup搭建开发环境

安装rollup环境

npm i @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

配置rollup

// rollup.config.jsimport babel from "rollup-plugin-babel"import serve from "rollup-plugin-serve"export default {    input: './src/index.js',  // 打包入口    output: {        file: 'dist/umd/vue.js', //出口路径        name: 'Vue' , // 指定打包后全局变量的名字        format: 'umd' , // 统一模块规范        sourcemap: true, // es6->es5 开启源码调试，可以找到源代码报错位置    },    plugins:[ //使用的插件        babel({            exclude:'node_modules/**' //排除文件        }),        process.env.ENV==='development'?serve({            open:true,            openPage:'/public/index.html', //默认启动html的路径            port:3000,            contentBase: ''        }):null    ]}

项目搭建

这里搭建了一个Vue项目，主要代码都放在src下面

2.响应式原理探秘

1.Object.defineProperty

想要了解Vue2的响应式原理，我们得先来简单了解一下Object.defineProperty

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性,默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。

Object.defineProperty(obj,prop,desc)

• obj：需要定义属性的对象
• prop：当前需要定义的对象属性
• desc：属性描述符

该方法最低兼容到IE8，这也就是Vue最低兼容到IE8的原因。

2.Vue初始化过程

我们先来分析一下Vue的初始化都做了哪些事情，我们在使用Vue的时候一般都会这样写：

const vm = new Vue({  el:'#app',  data(){    return {      name: '南玖'    }  }})

我们知道Vue只能通过new关键字初始化，所以Vue应该是一个构造函数，然后会调用this._init方法进行初始化过程，OK，我们自己可以来实现一下

import {initMixin} from "./init"function Vue (options) {  if (process.env.NODE_ENV !== 'production' &&    !(this instanceof Vue)) {    warn('Vue is a constructor and should be called with the `new` keyword')  } // 开发环境下不通过new进行调用会告警  /*调用_init初始化，这个方法是挂在Vue原型上的*/  this._init(options)  // options就是new Vue是传入的参数，包括：el,data,computed,watch,methods...}initMixin(Vue) // 给Vue原型上添加_init方法export default Vue

我们接着来写这个init.js,这里主要是给Vue原型上挂上方法：_init,$mount,_render,$nextTick等

import {initState} from "./state"//initMixin就做了一件事，就是给Vue原型挂上_init方法export function initMixin(Vue){    // 初始化流程    Vue.prototype._init = function (options){        // console.log(options)        const vm = this // vue中使用this.$options        vm.$options = options        // /*初始化props、methods、data、computed与watch*/        initState(vm)       // 这里先看initState，后面还会有很多初始化事件：初始化生命周期、初始化事件、初始化render等等    }}

初始化data，这里我们知道Vue支持传入的data可以是一个对象也可以是一个方法，所以我们需要判断一下传入的data的数据类型，是对象就直接传给observe，是方法就先执行再将返回值传给observe。

function initData(vm) {    console.log('初始化数据',vm.$options.data)    // 数据初始化    let data = vm.$options.data;    data = vm._data =  typeof data === 'function' ? data.call(this) : data    // 对象劫持，用户改变了数据 ==》 刷新页面    // MVVM模式 数据驱动视图    // Object.definePropety() 给属性增加get和set方法    observe(data)  //响应式原理}

3.响应式原理

将数据变成可观察的，我们都知道Vue2是通过Object.defineProperty来实现的。ok，这里我们就进入了这次的重点原理讲解：我们知道Object.defineProperty这个方法，只能劫持对象不能劫持数组，所以这里我们判断一下数据类型，数组需要单独处理，重写数组原型上的方法，在数组变更时在通知到订阅者

// 把data中数据使用Object.defineProperty重新定义 es5// Object.defineProperty 不能兼容IE8及以下，所以vue2无法兼容IE8版本import {isObject,def} from "../util/index"import {arrayMethods} from "./array.js"  // 数组方法export function observe (data) {    // console.log(data,'observe')    let isObj = isObject(data)    if(!isObj) return     return new Observer(data) // 观测数据} class Observer {     constructor(v){        // 如果数据层次过多，需要递归去解析对象中的属性，依次增加set和get方法        def(v,'__ob__',this)        if(Array.isArray(v)) {            // 如果是数组的话并不会对索引进行监测，因为会导致性能问题            // 前端开发中很少去操作索引 push shift unshift            v.__proto__ = arrayMethods            // 如果数组里放的是对象，再进行监测            this.observerArray(v)        }else{          //对象则调用walk进行劫持            this.walk(v)        }             }     observerArray(value) {         for(let i=0; i<value.length;i++) {             observe(value[i])         }     }   /* 遍历每一个对象并且为它们绑定getter与setter。该方法只有在数据类型为对象时才能被调用  */     walk(data) {         let keys = Object.keys(data); //获取对象key         keys.forEach(key => {            defineReactive(data,key,data[key]) // 定义响应式对象         })     } } function  defineReactive(data,key,value){     observe(value) // 递归实现深度监测，注意性能     Object.defineProperty(data,key,{         get(){             // 依赖收集，下期探讨             //获取值            return value         },         set(newV) {             //设置值            if(newV === value) return            observe(newV) //继续劫持newV,用户有可能设置的新值还是一个对象            value = newV           /*dep对象通知所有的观察者，下期探讨*/      			//dep.notify()            console.log('值变化了',value)         }     }) }

4.数组方法重写

// 重写数组的7个方法： push,pop,shift,unshift,reverse,sort,splice会导致数组本身改变let oldArrayMethods = Array.prototype// value.__proto__ = arrayMethods // arrayMethods.__proto__ = oldArrayMethodsexport let arrayMethods = Object.create(oldArrayMethods)const methods = [    'push','pop','shift','unshift','reverse','sort','splice']methods.forEach(method=>{    arrayMethods[method] = function(...args) {        console.log('用户调用了：'+method,args)        const res = oldArrayMethods[method].apply(this, args) // 调用原生数组方法        // 添加的元素可能还是一个对象        let inserted = args //当前插入的元素        //数组新插入的元素需要重新进行observe才能响应式        let ob = this.__ob__        switch (method) {            case 'push':            case 'unshift':                inserted = args                break;            case 'splice':                inserted = args.slice(2)                break;            default:                break;        }        if(inserted) {            ob.observerArray(inserted)  //将新增属性继续        }        console.log('数组更新了：'+ JSON.stringify(inserted))        //通知所有注册的观察者进行响应式处理,这里下期再来探讨        // ob.dep.notify()         return res    }})

OK，写到这里我们可以来测试一下我们的Vue了

let vm = new Vue({  el:'#app',  data(){    return{      a:1,      b:{name:'nanjiu'},      c:[{name:'front end'}]    }  },  computed:{}})vm._data.a = 2vm._data.c.push({name:'sss'})

这里控制台应该会打印出如下内容：

这样Vue的数据响应式，我们就算实现了，但这里看着有点别扭，我们希望操作Vue的data里的数据可以直接通过this来获取，而不是通过this._data来获取，这个很简单，我们只需要再做一层代理就可以实现了。

5.代理

export function proxy (target,sourceKey,key) {    // target: 想要代理到的目标对象，sourceKey：想要代理的对象  	const _that = this    Object.defineProperty(target, key, {        enumerable: true,        configurable: true,        get: function(){            return _that[sourceKey][key]        },        set: function(v){            _that[sourceKey][key] = v        }    })}

然后再initData里面调用该方法

function initData(vm) {    console.log('初始化数据',vm.$options.data)    // 数据初始化    let data = vm.$options.data;    data = vm._data =  typeof data === 'function' ? data.call(this) : data    // 对象劫持，用户改变了数据 ==》 刷新页面    // MVVM模式 数据驱动视图     Object.keys(data).forEach(i => {        proxy.call(vm,vm,'_data',i)    })    // Object.definePropety() 给属性增加get和set方法    observe(data)  //响应式原理}

然后我们就可以愉快的使用this直接去访问data里面的数据了～

3.总结

OK，Vue的响应式原理我们就算全都实现了一遍，Vue2的响应式原理主要是通过Object.defineProperty来实现的，但这个方法有缺陷，不能劫持数组，所以对数据需要单独处理，在Vue3中，底层把响应式处理改成了通过proxy来实现，这个方法对数组劫持也同样适用。这里我们只探讨了Vue是如何进行响应式处理，至于它如何收集依赖，以及如何通知视图更新我们下期再来一起学习吧～

觉得文章不错，可以点个赞呀^_ 另外欢迎关注留言交流～