Vue----Vue简介

---

1 Vue简介

1.1 什么是Vue

Vue是一套用于构建用户界面的前端框架

构建用户界面：

用Vue往页面中填充数据非常方便。
前端开发者最主要的工作就是为网站的使用者构建美观、舒适、好用的网页。

框架：
一套现成的解决方案
vue全家桶：vue(核心库)、vue-router(路由方案)、vuex(状态管理方案)、vue组件库(快速搭建页面UI效果的方案)
辅助vue开发的一系列工具：

vue-cli：npm全局包，一键生成工程化的vue项目，基于webpack，大而全
vite：npm全局包，一键生成vue项目，小而巧
vue-devtools：浏览器插件，辅助调试工具
vetur：vscode插件，提供语法高亮和智能提示

1.2 vue的特性

vue框架的特性主要体现在：

1.数据驱动视图

使用vue的页面中，vue会监听数据的变化，自动重新渲染页面的结构(数据驱动视图是单向的数据绑定)

数据发生变化，页面会自动重新渲染

2.双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作dom的前提下自动把用户填写的内容同步到数据源，开发者不用再手动操作dom

1.3 MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。

它把每个HTML页面拆分成三个部分：

Model：当前页面所渲染的DOM结构。
View：当前页面渲染时所依赖的数据源。
ViewModel：vue实例，MVVM的核心。

1.3.1 MVVM的工作原理

ViewModel作为MVVM的核心，是它把当前页面的数据源（Model)和页面的结构(View）连接在了一起。

当数据源发生变化时，会被ViewModel监听到，VM会根据最新的数据源自动更新页面的结构。
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model数据源中。

1.4 vue的版本

当前，vue 共有3个大版本，其中：

2.x版本的vue是目前企业级项目开发中的主流版本
3.x版本的vue 于 2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x版本的vue只乎被淘汰，不再建议学习与使用

vue3.x和vue2.x版本的对比：

vue2.x中绝大多数的API与特性，在vue3.x中同样支持。同时，vue3.x中还新增了3.x所特有的功能、并废弃了某些2.x中的旧功能

新增的功能例如:
组合式API、多根节点组件、更好的 TypeScript支持等

废弃的旧功能如下:
过滤器、不再支持$on，$off和$once 实例方法等

[详细的变更信息，请参考官方文档给出的迁移指南](https://v3.vuejs.org/guide/ migration/introduction.html)