vue原理代码的基本实现

素颜马尾好姑娘i 2023-01-16 06:58 112阅读 0赞

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

**经过上节课的分析 我们可以得知  
Vue的功能  
1:负责接收初始化的参数(选项)  
2:负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter  
3:负责调用 observer 监听 data 中所有属性的变化  
4：负责调用 compiler 解析指令/插值表达式**  
vue结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]  
在这里 给大家分析下\_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了 具体可参考图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center 1]  
这节课我们就讲到这里 下节课我们继续

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

[Link 1]: https://blog.csdn.net/weixin_43097944/article/details/116105887
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/40f905c4a0394e08b57ef7301585f70d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/00b6d35760bc450c983b8a55af3c60d1.png
[vue_observer]: https://blog.csdn.net/weixin_43097944/article/details/116110835