vue的全家桶都有什么（vue全家桶进阶之路1：前言）

　　Vue.js简称Vue,用于构建用户界面的渐进式框架
  
  
  
  
  
  。　　

　　Vue是一款国产前端框架             ，它的作者尤雨溪（Evan You）是一位美籍华人
  
 
  
 
  
 
  
 
  
 
  
 
，2014年2月











，尤雨溪开源了一个前端开发库 Vue.js 
  
  
  
  
  
  ，2015年发布1.0.0版本
  
  
  
  
  
  
，2016年4月发布2.0版本
 


 


 


 


 


 

，目前 
 
 
 
 
 
 ，尤雨溪全职投入 Vue.js 的开发与维护
   
   
   
   
   
   
，立志将 Vue.js 打造成与 Angular/React 平起平坐的世界顶级框架  
  
  
  
  
  
 。

　　vue使用的是html编码的
 


 


 


 


 


 


。因为Vue是一款流行的JavaScript前端框架
 

 

 

 

 

 
，旨在更好地组织与简化Web开发
 
 
 
 
 
 。Vue.js 

 

 

 

 

 

 ，或简称为Vue            ，是一个用于创建用户界面的开源JavaScript框架

 
 

 
 

 
 

 
 

 
 

 
 
，也是一个创建单页应用的Web应用框架











，他的底层是html语言和js语言和css语言组成的                   ，所以当然是html的编码的   
   
   
   
   
   
 。

　　Vue
 
 
 
 
 
 
 
 
 
 
 
 
，读音是/vju:/

















，是一套用于构建用户界面的渐进式框架             ，自底层向上应用
  
 
  
 
  
 
  
 
  
 
  
 
，Vue的核心库只关注视图层











，容易入门 
  
  
  
  
  
  ，可以和第三方库或者已有的项目进行整合
  
  
  
  
  
  
，可以做复杂的单页应用
 

 

 

 

 

 

。简单的说
 


 


 


 


 


 

，vue是一套前端的开发框架 
 
 
 
 
 
 ，vue
  
  
  
  
  
  、react  
  
  
  
  
  
 、angular是前端开发的三驾马车
   
   
   
   
   
   
，其中vue在国内非常流行
 

 

 

 

 

 
，拥有庞大的使用群体
 


 


 


 


 


 


、技术资源和生态资源 

 

 

 

 

 

 ，为后期学习vue的人填坑铺路            ，同时也在使用和升级方面形成良性循环

 
 

 
 

 
 

 
 

 
 

 
 
，成为无论是前端UI还是后端工程师都要学习和掌握的对象

 

 

 

 

 

 。

　　Vue.js的优点：

　　　　易用：现成的官方文档

　　　　灵活：渐进式框架

　　　　高效：超快虚拟DOM

　　Vue.js的核心：

　　　　数据驱动：将操作DOM转变成操作数据

　　　　组件化：扩展HTML元素











，封装可复用diamante             。

　　Vue采用的是MVVM框架：

　　　　MVVM是Model-View-ViewModel的简写
 
 

 
 

 
 

 
 

 
 

 
 

。它本质上就是MVC的改进版                   ，其核心思想是响应式编程模型











。　　　　　　

　　　　　　Model 层: 对应数据层的域模型
 
 
 
 
 
 
 
 
 
 
 
 
，它主要做域模型的同步                   。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同 步 
 
 
 
 
 
 
 
 
 
 
 
。在层间关系⾥

















，它主要⽤于抽象出 ViewModel 中视图的 Model


















。

　　　　　　View 层: 作为视图模板存在             ，在 MVVM ⾥
  
 
  
 
  
 
  
 
  
 
  
 
，整个 View 是⼀个动态模板            。除了定义结构
 
 
 
 
 
 、布局外











，它展示的是 ViewModel 层的数据和状态  
 
  
 
  
 
  
 
  
 
  
 
 。 View 层不负责处理状态 
  
  
  
  
  
  ， View 层做的是 数据绑定的声明   
   
   
   
   
   
 、 指令的声明
 

 

 

 

 

 

、 事件绑定的声明












。

　　　　　　ViewModel 层: 把 View 需要的层数据暴露
  
  
  
  
  
  
，并对 View 层的 数据绑定声明

 

 

 

 

 

 、 指令声明             、 事件绑定声明 负责
 


 


 


 


 


 

，也就是处 理 View 层的具体业务逻辑
  
  
  
  
  
  。 ViewModel 底层会做好绑定属性的监听  
  
  
  
  
  
 。当 ViewModel 中数据变化 
 
 
 
 
 
 ， View 层会得到更 新；⽽当 View 中声明了数据的双向绑定（通常是表单元素）
   
   
   
   
   
   
，框架也会监听 View 层（表单）值的变化
 


 


 


 


 


 


。⼀旦值变 化
 

 

 

 

 

 
，View 层绑定的 ViewModel 中的数据也会得到⾃动更新
 
 
 
 
 
 。

　　　　

　　MVVM 的优缺点 ?

　　优点:

　　　　1. 分离视图（View）和模型（ Model ） , 降低代码耦合 

 

 

 

 

 

 ，提⾼视图或者逻辑的重⽤性 : ⽐如视图（View）可以独⽴于 Model变化和修改            ，⼀个 ViewModel 可以绑定不同的 "View" 上

 
 

 
 

 
 

 
 

 
 

 
 
，当 View 变化的时候 Model 不可以不变











，当 Model 变化 的时候View 也可以不变   
   
   
   
   
   
 。你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯                   ，让很多 view 重⽤这段视图逻辑
 

 

 

 

 

 

。

　　　　2. 提⾼可测试性 : ViewModel 的存在可以帮助开发者更好地编写测试代码

 

 

 

 

 

 。

　　　　3. ⾃动更新 dom: 利⽤双向绑定 , 数据更新后视图⾃动更新 , 让开发者从繁琐的⼿动 dom 中解放             。

　　缺点:

　　　　1. Bug 很难被调试 : 因为使⽤双向绑定的模式
 
 
 
 
 
 
 
 
 
 
 
 
，当你看到界⾯异常了

















，有可能是你 View 的代码有 Bug              ，也可能是 Model 的代码有问题
 
 

 
 

 
 

 
 

 
 

 
 

。数据绑定使得⼀个位置的Bug 被快速传递到别的位置
  
 
  
 
  
 
  
 
  
 
  
 
，要定位原始出问题的地⽅就变得不那么容易 了











。另外











，数据绑定的声明是指令式地写在View 的模版当中的 
  
  
  
  
  
  ，这些内容是没办法去打断点 debug 的                   。

　　　　2. ⼀个⼤的模块中 model 也会很⼤
  
  
  
  
  
  
，虽然使⽤⽅便了也很容易保证了数据的⼀致性
 


 


 


 


 


 

，当时⻓期持有 
 
 
 
 
 
 ，不释放内存就造 成了花费更多的内存 
 
 
 
 
 
 
 
 
 
 
 
。

　　　　3. 对于⼤型的图形应⽤程序
   
   
   
   
   
   
，视图状态较多
 

 

 

 

 

 
， ViewModel 的构建和维护的成本都会⽐较⾼


















。