Vue3.0入门：基本使用以及vue的调试工具

---

Vue 简介

1.1 什么是vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1.2 解读核心关键词：构建用户界面

前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页

1.3 构建用户界面的传统方式

在传统的 Web 前端开发中，是基于 jQuery + 模板引擎 的方式来构建用户界面的。

1.4使用 vue 构建用户界面

使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。

1.5 解读核心关键词：框架

官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：
⚫ vue（核心库）
⚫ vue-router（路由方案）
⚫ vuex（状态管理方案）
⚫ vue 组件库（快速搭建页面 UI 效果的方案）

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

1.6 总结：什么是vue

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

二、Vue的特性

vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

2.1 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源
中。示意图如下：

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

2.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分：

在 MVVM 概念中：
View 表示当前页面所渲染的 DOM 结构。
Model 表示当前页面渲染时所依赖的数据源。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

2.4 MVVM 的工作原理

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

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

三、Vue的版本

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

总结：
3.x 版本的 vue 是未来企业级项目开发的趋势；
2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；

3.1 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

四、vue的基本使用

4.1 基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

4.2 基本代码与MVVM的对应关系

五、vue的调试

5.1. 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器在线安装 vue-devtools
vue 2.x 调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
vue 3.x 调试工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

注意：vue2 和 vue3 的浏览器调试工具不能交叉使用

5.2. 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项：

5.3. 使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。