Vue 起步

Vue 起步

1. Vue简介

1-1 什么是Vue?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

Vue 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架

Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

Vue 并没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

• 解耦视图与数据
• 响应式和组件化
• 前端路由
• 状态管理
• 双向绑定
• 虚拟 DOM

1-2 Vue优点

• Vue 是一个轻量级框架。Vue 的体积只有几十 kb，非常轻量
• Vue 简单易学，对新手友好度高
• 双向数据绑定。Vue 提供了双向数据绑定 v-model 的语法糖，让我们可以避免 DOM 操作
• 组件化开发。我们可以把页面拆分成大大小小的组件，这样大大提高了代码的可复用率和可读性

1-3 Vue与React对比

React 和 Vue 都是 MVVM 框架，它们之间有很多相似之处：

• 两者都是用于 web 开发的 JavaScript 库
• 两者的使用都快速轻便
• 两者都是基础组件式的开发
• 两者都使用了虚拟 DOM

React 和 Vue 在某些方面也存在一定的差异：

• Vue 的数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM，而 React 则是基于数据不可变，React 需要通过 setState 来触发渲染流程，同时可以通过 shouldComponentUpdate 来控制视图是否更新
• Vue 推荐使用模板语法，把 html、css、js 组合到一起，用各自的处理方式，通过模板引擎来处理。，而 React 则推荐使用 JSX 语法进行书写，React 的思路是 all in js，通过 js 生成 html
• React 中的 state 对象是不可变的，我们不能被直接改变 state 的值，而是需要通过使用 setState() 的方法去更新状态，在 Vue 中，state 并不是必须的，数据由 data 属性进行管理，我们可以直接修改 data 属性中的值

2. MVVM 模型框架

2-1 什么是MVVM?

MVVM 分为 Model、View、ViewModel：

• Model 代表数据模型，数据和业务逻辑都在 Model 层中定义
• View 代表 UI 视图，负责数据的展示
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间实现了双向数据绑定，当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作 DOM