忧郁的大能猫
好奇的探索者，理性的思考者，踏实的行动者。
blog/A-IT/10-编程语言/js/玩转Vue3全家桶
Table of Contents:
开篇词 | 如何借助Vue 3建构你的前端知识体系？
对于未来的前端开发，我们现在用的所有框架都有可能会过时，但是框架沉淀下来的思想会继续指导着我们的前端开发
01 | 宏观视角：从前端框架发展史聊聊为什么要学Vue 3？
AngularJS 的诞生，引领了前端 MVVM 模式的潮流。所谓 MVVM，就是在前端的场景下，把 Controller 变成了 View-Model 层，作为 Model 和 View 的桥梁，Model 数据层和 View 视图层交给 View-Model 来同步
在前端 MVVM 模式下，不同框架的目标都是一致的，就是利用数据驱动页面，但是怎么处理数据的变化，各个框架走出了不同的路线。
这些框架要回答的核心问题就是，数据发生变化后，我们怎么去通知页面更新。各大框架在这个步骤上，各显神通：
Vue1 的解决方案，是使用响应式，初始化的时候，Watcher 监听了数据的每个属性，这样数据发生变化的时候，我们就能精确地知道数据的哪个 key 变了，去针对性修改对应的 DOM 即可。
React 框架的解决方案，是在页面初始化的时候，在浏览器 DOM 之上，搞了一个叫虚拟 DOM 的东西，也就是用一个 JavaScript 对象来描述整个 DOM 树。我们可以很方便的通过虚拟 DOM 计算出变化的数据，去进行精确的修改。
Vue 与 React 框架的对比
在 Vue 框架下，如果数据变了，那框架会主动告诉你修改了哪些数据；
而 React 的数据变化后，我们只能通过新老数据的计算 Diff 来得知数据的变化。
这两个解决方案都解决了数据变化后，如何通知页面更新的问题，并且迅速地获得了很高的占有率，但是他们都碰到了性能的瓶颈：
* 对于 Vue 来说，它的一个核心就是“响应式”，也就是数据变化后，会主动通知我们。响应式数据新建 Watcher 监听，本身就比较损耗性能，项目大了之后每个数据都有一个 watcher 会影响性能。
* 对于 React 的虚拟 DOM 的 Diff 计算逻辑来说，如果虚拟 DOM 树过于庞大，使得计算时间大于 16.6ms，那么就可能会造成性能的卡顿。
02 | 上手：一个清单应用帮你入门Vue.js
jQuery 时代的开发逻辑，就是我们先要找到目标元素，然后再进行对应的修改。
学习 Vue.js，首先就要进行思想的升级，也就是说，不要再思考页面的元素怎么操作，而是要思考数据是怎么变化的。这就意味着，我们只需要操作数据，至于数据和页面的同步问题，Vue 会帮我们处理。
在 Vue 框架下，如果你想要页面显示一个数据，就要先在代码的 data 里声明数据；在输入框的代码里，使用 v-model 来标记输入框和数据的同步；在 HTML 模板里，使用两个花括号标记，来显示数据，例如{{title}}