初始化数据

vue中最核心的我们都知道那就是响应式数据，数据的变化视图自动更新。那么我们来new一个我们自己的vue

在index.html文件下加入如下代码，这也是vue最常见的基本结构。data已经有了下面我们来获取data的数据

 <script src="./vue.js"></script>
 <script>
    const vm=new MVue({
         data(){
             return{
                 name:"zhangsan",
                 age:"16"
             }
         }
    })
 </script>

首先我们在src/main.js文件下加入如下代码

// 创建MVue构造函数
function MVue(options) {      // options就是我们接受到用户的选项，选项式api
    
}

// 将构造函数导出
export default MVue

为了更能的扩展功能和方便维护，我们需要一个专门做初始化的方法。所以我们在src下创建init.js文件加入如下代码

export function init(MVue){
    // 给MVue原型对象上挂载_init()方法
    MVue.prototype._init = function(options){

    }
}

在main.js文件下如果这个方法，并且调用

import { init } from "./init"

// 创建MVue构造函数
function MVue(options) {      // options就是我们接受到用户的选项，选项式api
    // 当vue被new的时候调用_init()方法
    this._init(options)
}

init(MVue)

// 将构造函数导出
export default MVue

下面我们就可以写我们的初始化方法了，init.js文件下加入如下代码。可能你会好奇这个init_state()方法是那里的。由于用户选项有很多比如data，watch，computed…所以我们最好创建一个文件统一管理。在src文件下创建state.js文件

import { init_state } from "./state"

export function init(MVue){
    // 给MVue原型对象上挂载_init()方法
    MVue.prototype._init = function(options){

        // 在用户选项挂载到实例上
        const vm=this
        vm.$options=options

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

在state.js文件下加入如下代码

export function init_state(vm){
    // 获取实例上挂载的选项
    const opts=vm.$options;

    // 选项上如果存在data初始化data
    if(opts.data){
        init_data(vm);
    }
}
function init_data(vm){
    let data=vm.$options.data;

    // 判断data是对象还是函数并且重新赋值
    data=typeof data==='function'?data.call(vm):data;

    console.log(data);
}

到这里，输入打包命令打开index.html如果在游览器下看到如下图所示，我们就成功获取到了data里面的数据

pnpm run build

实现对象的响应式原理

下面我们首先来实现只有一层对象的数据劫持。state.js文件下加入如下代码

import { observe } from "./observe/index";

export function init_state(vm){
    // 获取实例上挂载的选项
    const opts=vm.$options;

    // 选项上如果存在data初始化data
    if(opts.data){
        init_data(vm);
    }
}
function init_data(vm){
    let data=vm.$options.data;

    // 判断data是对象还是函数并且重新赋值
    data=typeof data==='function'?data.call(vm):data;

    // 将data劫持重新定义data
    observe(data)
}

src文件下创建observe/index.js文件并且加入如下代码

class Observer {
    constructor(data) {
        /* 
            这里注意,Object.defineProperty只能劫持已经存在的属性，新增或删除的无法劫持
            这也是为什么vue2中新增了，$set和$delete方法这类方法的原因
        */
        this.walk(data)
    }
    walk(data) {
        // 循环对象keys依次劫持，重新定义属性
        Object.keys(data).forEach(key => {
            define_reactive(data, key, data[key])
        })
        
        // 这里重新定义data后我们打印看下data是否都加入了get和set方法
        console.log(data);
    }

}

// 这里会存在一个闭包，get和set方法存放了函数外部的变量value
export function define_reactive(data, key, value) {
    Object.defineProperty(data, key, {
        get() {
            return value
        },
        set(newValue){
            if(value!=newValue){
                value=newValue
            }
        }
    })
}


export function observe(data) {

    // 对对象劫持
    if (typeof data !== 'object' || data === null) {
        return;
    }

    // 如果一个对象被劫持过就不需要再次劫持，我们可以通过一个观察类判断是否被劫持过
    return new Observer(data)
}

如果你的游览器打印了如下图所示，那么恭喜你只有一层对象的data你重新定义完成了

说起data，vue2中一直有个属性_data属性。这上面挂载了我们所有在data中定义的属性。下面我们来实现它

在state.js文件下修改如下代码。没错就是这么简单要加入vm._data=data这行代码就完成了。由于这是引用值。所有对data的修改也会影响到_data

function init_data(vm){
    let data=vm.$options.data;

    // 判断data是对象还是函数并且重新赋值
    data=typeof data==='function'?data.call(vm):data;

    // 实例上挂载_data
    vm._data=data

    // 将data劫持重新定义data
    observe(data)
}

下面我们在index.html下打印vm看看是否有我们的_data属性

到这里，其实我们的_data属性并不完美，你通过vm获取属性的时候发现每次都要加上_data，
vm._data.name。但是vue2中并不是这样的而是直接vm.name就可以获取并且修改。下面我们来解决这个问题

state.js文件下加入如下代码。我们将将vm._data代理给vm就可以解决这个问题

function proxy(vm,source,key){
    Object.defineProperty(vm,key,{
        get(){
            return vm[source][key]
        },
        set(newValue){
            if(vm[source][key]!=newValue){
                vm[source][key]=newValue;
            }
        }
    })
}

function init_data(vm){
    let data=vm.$options.data;

    // 判断data是对象还是函数并且重新赋值
    data=typeof data==='function'?data.call(vm):data;

    // 实例上挂载_data
    vm._data=data

    // 将data劫持重新定义data
    observe(data)

    // 将vm._data代理给vm
    for(let key in data){
        proxy(vm,'_data',key)
    }
}

下面我们在看我们的vm实例会发现多了name和age属性。并且可以通过vm访问到和修改

到这里不知你们还记得我们最早说过的，这只是一个只有一层对象的数据劫持。如果多层就代理不到了
我们修改index.html代码如下

       const vm=new MVue({
            data(){
                return{
                    name:"zhangsan",
                    age:"16",
                    address:{
                        city:"地球村    "
                    }
                }
            }
       })
       console.log(vm);

在游览器上。我们会看到address并且没有get和set方法。下面我们来解决这个问题

在observe/index.js文件下修改如下代码

// 这里会存在一个闭包，get和set方法存放了函数外部的变量value
export function define_reactive(data, key, value) {
    observe(value)		// 递归调用我们的observe方法

    Object.defineProperty(data, key, {
        get() {
            return value
        },
        set(newValue){
            if(value!=newValue){
                value=newValue
            }
        }
    })
}

再次看我们的address就会发现get和set方法已经出现了。这说明我们的多级对象代理已经完成了

用户可能会存在这样的赋值，现在我们是没办法办法代理到的

const vm = new MVue({
    data() {
        return {
            name: "zhangsan",
            age: "16",
           
        }
    }
})
vm.address = {
    city: "地球村"
}

所以我们在observe/index.js文件下define_reactive方法中的set修改如下。如果直接通过vm赋值对象，给这些属性同样代理

set(newValue){
    if(value!=newValue){
        observe(newValue)
        value=newValue
    }
}