Vue笔记一：Vue是什么

PS: Vue文档阅读记录

什么是VUE

vue是渐进式的基于MVVM的纯前端框架
1.渐进式:可随意和其他技术混搭
全家桶:必须完整使用所有组件 很难喝其他技术混搭
2.基于MVVM:
3.纯前端:只靠浏览器就可以运行不需要后端技术
4.框架:已经拥有核心功能的半成品代码
从根本上简化了步骤
所有以数据操作为主的项目 都可以用vue框架

MVVM模式

MVVM框架:
1.传统前端将程序分为三部分
html 定义网页内容和结构
css 为网页中内容添加样式
js 为网页添加交互行为
2.html和css缺少动态语言必须的要素 比如没有变量不能执行分支结构和循环结构
所有操作
3.现代前端
a.界面View: htm+css html增强支持变量分支和循环
b.数据模型Model: 专门保存这个页面中所需所有数据的对象
c.视图模型的绑定ViewModel:专门自动同步模型中的数据与视图中的显示
包含两大子系统:响应系统
虚拟dom树

响应系统:只要模型变量被修改就可自动发出通知
new Vue先将data对象包裹进view-model中 然后将data中每个变量隐姓埋名
new Vue自动给data中每个变量创建一个访问器属性 而且在每个变量的set()中建立了通知机制
在使用任何一个变量时 通过访问器属性去使用变量 修改值触发set() 发出通知

虚拟dom树 只保存可能发生变化的元素的简化版dom树
在加载页面时 newVue扫描监控的页面部分 只将受变量影响的少量元素保存在一个虚拟dom树存储结构中
虚拟dom树中封装了dom增删改查的方法
在任何时候修改变量时 触发变量的set()都会发出通知给虚拟dom树
虚拟dom树接到变量变化的通知后 扫描其中元素 找到并更新受影响的元素

---

虚拟dom树与真实DOM树的区别:小 遍历速度快
只更新受影响的元素 效率高
封装了dom操作 避免了重复编码

vue界面和数据模型的绑定机制:
每个变量都自动添加访问器属性 在set()中添加了通知机制
修改变量值时触发通知机制 虚拟dom树更新受此变量影响的元素