Vue与React对比(基础篇) ： 一、Hello World

一、Vue 初识

1.1 Vue的定义

Vue 是一套用于构建用户界面的渐进式框架。

• 英文官网 ：vuejs.org/
• 中文官网 ：cn.vuejs.org/

渐进式的定义：

    渐进式指的是你可以在Vue核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。也就是说，我们不必一次性接受并使用它的全部功能特性，后续可以根据自己需要进行相应功能特性的使用。

1.2 Vue 的特点

1. 遵循MVVM模式 ；

    MVVM是 Model-View-ViewModel 的缩写，即 _**模型-视图-视图模型**_。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互。vue 通过双向数据绑定把 View 和 Model 连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑即可。

2. 声明式渲染；

    不需要直接去控制dom，你只要把数据操作好，vue自己会去进行视图层的数据更新，可以节省很多操作dom的代码。

3. 组件化应用；

    Vue允许我们使用小型、独立和通常可复用的组件构建大型应用，提高代码复用率、让代码易于维护；

4. 虚拟DOM；

    实质是一个JavaScript对象，vue会通过diff算法比对新旧vdom树，记录有变化的部分，并最后再将**变化的部分**同步到DOM中（不需要整个DOM树重新渲染）。

1.3 Vue 周边生态

1.vite : 被称为下一代前端开发与构建工具，极大地改善了前端的开发体验，特点就是快；2.vue-cli : 快速搭建基于 webpack 的 Vue 项目的开发者工具，目前官方更推荐使用；3.vue.js devtools : 用于调试 Vue.js 项目的浏览器 devtools 扩展插件；4.vue-resource : Vue.js 插件，提供了使用 XMLHttpRequest 或 JSONP 发出 Web 请求和处理响应的服务；5.vue-router：Vue2 的官方前端路由解决方案；6.vuex : Vue 官方的状态管理器，分别在 v3 和 v4 两个大版本支持 Vue2 和 Vue3；7.pinia: 又一个官方的 Vue 状态管理器，比 Vuex 更轻量，基于 Vue 的组合式 API（composition API），同时支持 Vue2 和 3，被认为是下一代的 Vuex；8.vuedraggable : 基于 Sortable.js 的 Vue 拖拽组件；9.mint-ui：基于 vue 的