详解vue实现原理之vue基本结构和功能

我会带着你远行 2023-01-16 06:57 109阅读 0赞

\*\*本章我讲向大家讲解vue实现的基本原理 该原理我会分成很多个小章节 一步一步的为大家讲解 咋们小步快跑

**1. 在模拟vue原理之前 我们得明白vue的基本结构以及我们需要实现的基本功能 我们打印vue实例 关注我们需要模拟的成员  
2. 如下代码 是一个基本的vue实例**

let vm = new Vue({ 
        el: '#app',
        data: { 
            count: 1,
            msg: '文案'
        }
    });

以上代码vue实例化 可以看出vue是一个构造函数并传入了参数 我们打印其中的vm观察可得如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]

*  通过上图 我们可以发现
    
        ****1：我们发现data中的成员count和msg被转换成了get和set  目的是在其他地方使用的时候 我们可以直接使用this访问 方便操作
        
        2：data中的成员被记录在了$data中 并且里面的数据被转换成了set和get 这里面的set才是真正监视数据变化的地方
        
        3：$options 把构造函数中的参数都记录在了$options中
        
        4：_data 这里面的值和$data指向的是同一个对象 但是_data是私有成员 $data是公共成员  这课程中
        我们只需要模拟公共的成员
        
        5：$el 对应着我们参数选项的el  el可以是一个选择器 也可以是一个dom对象  如果是一个选择器
        我们需要在vue中将选择器转换为一个dom对象
        
        6：综上 我们要做的就是  把vue的成员注入到vue实例 并且把data中的数据转换为get和set****

通过上面的分析 我们再用如下图整体分析下vue的基本功能：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center 1]  
**Vue  
把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setter  
Observer  
能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 Dep  
Compiler  
解析每个元素中的指令/插值表达式，并替换成相应的数据  
Dep  
添加观察者(watcher)，当数据变化通知所有观察者  
Watcher  
数据变化更新视图**

## Vue总结 ##

**功能  
负责接收初始化的参数(选项)  
负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter  
负责调用 observer 监听 data 中所有属性的变化  
负责调用 compiler 解析指令/插值表达式  
结构**

本节课我们就先分析到这里 回顾一下 要明白vue的原理 我们的明白vue的基本结构及我们需要实现的功能 下节 我们讲用代码的实现来讲解vue原理代码的基本实现

上一篇：[详解js中观察模式和订阅发布模式的区别][js]  
下一篇：[vue原理代码的基本实现][vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/9b78da9e6ae0435ca808d0d961177b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzA5Nzk0NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/f98358d2f5bf4143816fda2ae84d3ab1.png
[js]: https://blog.csdn.net/weixin_43097944/article/details/116099047
[vue]: https://blog.csdn.net/weixin_43097944/article/details/116107335