vue基础全——vue简单说

不念不忘少年蓝@ 2022-02-27 15:50 354阅读 0赞

### 文章目录 ###

*  概念
 *  MVVM模式
 *   *  Vue的实现原理
 *  Vue的生命周期：

# 概念 #

Vue.js：基于MVVM模式实现的，一套用于构建用户界面的渐进式框架。  
高级功能：

*  解耦视图
 *  可复用组件
 *  前端路由
 *  状态管理
 *  虚拟DOM

# MVVM模式 #

*  MVVM：Model-View-ViewModel缩写，即模型-视图-视图模型。整这些虚的，说说能干啥：模型：后台传递过来的数据；视图：显示的页面；视图模型：MVVM的核心，给前面两者（模型、视图），连接view和model的桥梁。
 *  MVVM中，视图和模型都比较腼腆，不直接通信，通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定，如下图：

viewModel: 数据绑定

viewModel: dom事件监听

model:数据

view:视图

关于更多MVVM，MVC和MVVM的区别，MVVM框架，Angular原理，VUE实现原理，[点击链接][Link 1]

## Vue的实现原理 ##

观察者-订阅者（数据劫持）：使用Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。  
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者  
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数  
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图  
详细理解：[猛戳这里][Link 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

# Vue的生命周期： #

beforecreate：el 和 data 并未初始化  
created：完成了 data 数据的初始化，el没有  
beforeMount：完成了 el 和 data 初始化  
mounted：完成挂载  
beforeUpdate：数据修改前  
updated：数据修改后  
destroy：销毁前，解绑监听  
destroyed：销毁后  
详解：[猛戳这里][Link 3]

--------------------

后续继续更新。。。。

[Link 1]: https://menphis.blog.csdn.net/article/details/88860795
[Link 2]: https://www.cnblogs.com/bilibilicai/p/6826432.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tZW5waGlzLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220227/5b9647f8f6e642f6a8f6f4cb8c0d0f0d.png
[Link 3]: https://menphis.blog.csdn.net/article/details/88861271