Vue2源码学习

1.源码学习目录（版本号2.6.11）

|-dist                                                               #项目打包后的文件

|-scripts                                                           #与项目构建相关的脚本和配置文件

|-flow                                                               #flow的类型声明文件

|-src                                                                 #项目源代码

 |                   |-complier  

 |                   |-core

 |                   |             |-observe                     #观测劫持的代码 

 |                   |             |-vdom                         #虚拟 dom的daima

 |                    |             |-instance                    # 实例构造函数和原型方法

 |·                   |             |-global-api                   #全局api的代码

 |                     |            |-component                #内置组件的代码

 |-sfcplatform                                                     #单文件组件的解析代码

 |-shared                                                            #项目公用的代码

 |-test                                                                  #项目测试代码

1.初始化操作

const vm= new Vue（{
    data () {
       return {

         name:'bozi',
         age:18,
         adress:{


         }
         

}）

import { ininMixin } from './init'

//将所有的方法都耦合在一起
function Vue(options) {//options 就是用户的选项
    this._init(options)
}
ininMixin(Vue) //扩展了init方法

export default Vue


import { initState } from "./state"
export function ininMixin (Vue) {//给vue增加init方法的
    Vue.prototype._init = function (options) {//用于初始化操作

        //Vue vm.$option 就是获取用户的配置

        //我们使用的 vue的时候$nextTick $data $attr....
        const vm = this
        vm.$options = options //将用户的选项挂在在实例上

        //初始化状态
        initState(vm)
    }
}

初始化状态 

import { observe } from "./observe/index";
export function initstate (vm) {
    const opts = vm.$options; //获取所有的选项
    if (opts.data) {
        initData(vm)
    }
}

function proxy (vm, target, key) {
    Object.defineProperty(vm, key, {
        get () {
            return vm[target][key];
        },
        set (newValue) {
            return vm[target][key] = newValue
        }
    })
}
function initData (vm) {
    let data = vm.$options.data //data可能是函数，也可能是对象

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

    vm._data = data
    //对数据进行劫持
    observe(data)

    //将vm._data用vm来滴阿狸就可以了

    for (let key in data) {  
        proxy(vm, '_data', key);
    }
}