vue原理代码的基本实现

上一篇，我们分析了vue的基本结构 这节课 我们就按照vue的基本结构去实现我们需要的功能 即：vue原理

经过上节课的分析 我们可以得知
Vue的功能
1:负责接收初始化的参数(选项)
2:负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
3:负责调用 observer 监听 data 中所有属性的变化
4：负责调用 compiler 解析指令/插值表达式
vue结构

在这里 给大家分析下_proxyData() 即：代理data 其目的是 将data中的数据转换为getter和setter $el $data $options 是记录vue实例传过来的参数

接下来 我们就根据vue的功能和结构 用代码来具体实现

html：部分

<div id="app">
    <h1>插值表达式</h1>
    <h3>{{msg}}</h3>
    <h3>{{count}}</h3>
    <h1>v-text</h1>
    <div v-text='msg'></div>
    <h1>v-model</h1>
    <input type="text" v-model='msg' name="" id="">
    <input type="text" v-model='count' name="" id="">
    <div>{{msg}}</div>
</div>

js部分

具体实现步骤

1： 通过属性  保存选项的数据
2： 把data中的成员 转换为getter和setter  注入到vue实例中 方便使用
3：调用observer对象 监听数据变化
4：调用compiler 解析指令和插值表达式

```java
 class Vue {
        constructor(options) {
            // 通过属性  保存选项的数据
            this.$options = options || {};//如果我们在调用vue构造函数的时候 没有传入参数 我们初始化一个空对象
            this.$data = options.data || {};
            this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el;//如果我们是传入的选择器 则将选择器转换为dom对象
            // 把data中的成员 转换为getter和setter  注入到vue实例中 方便使用
            this._proxyData(this.$data)
            // 调用observer对象 监听数据变化
            // 调用compiler 解析指令和插值表达式 
        }
        _proxyData(data) {//vue传过来的参数 转换为getter和setter
            // 遍历data的所有属性
            Object.keys(data).forEach(key => {
                Object.defineProperty(this, key, {
                    // 可遍历 可枚举
                    enumerable: true,
                    configurable: true,
                    get() {
                        return data[key]
                    },
                    set(newValue) {
                        if (newValue === data[key]) {
                            return
                        } else {
                            data[key] = newValue;
                        }
                    }
                })
            })
            // 把data中的属性 注入到vue实例中

        }
    }

let vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello',
        count: 123
    }
})

最后 我们通过打印vm 看看下我们的实现结果 返显data已经添加上get和set了 具体可参考图

这节课我们就讲到这里 下节课我们继续

上一篇：详解vue实现原理之vue基本结构和功能
下一篇：vue原理之observer