邂逅Vue3
认识Vue3
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
那么问题来了？什么叫做渐进式框架？
通俗的说: 渐进式框架就是我们可以在项目中一点点引入和使用Vue，而不一定需要全部使用Vue来开发整个项目。
目前Vue在前端处于什么地位
目前前端最流行的是三大框架：Vue、React、Angular。
框架数据对比（Google指数）
框架数据对比（百度指数）
框架数据对比（npm下载量）
框架数据对比（GitHub）
谁是最好的前端框架？
当然，我不会去给出我的结论：
- 首先，这是一个敏感的话题，在很多地方都争论不休，就像很多人喜欢争论谁才是世界上最好的语言一样；
- 其次，争论这个话题是没有意义的，争论不休的话题；
- 但是，我们从现实的角度，分析一下，学习哪一门语言更容易找到工作？
- 找后端的工作：优先推荐Java、其次推荐Go、再次推荐Node（JavaScript），可能不推荐PHP、C#；
- 找前端的工作：优先推荐JavaScript（TypeScript）、其次Flutter、再次Android（Java、Kotlin）、iOS（OC、 Swift）；
- 也有很多的其他方向：游戏开发、人工智能、算法工程师等等；
- 那么，就前端来说，学习了HTML、CSS、JavaScript，哪一个框架更容易找到工作？
- 如果去国外找工作，优先推荐React、其次是Vue和Angular，不推荐jQuery了；
- 如果在国内找工作，优先推荐、必须学习Vue，其次是React，其次是Angular，不推荐jQuery了。
注意： jQuery库有时间的同学还是要学一下的好，虽然现在是一个比较古老的库，但是学起来不耽误什么时间。
学习vue2还是vue3
![]](https://i-blog.csdnimg.cn/blog_migrate/58d4fedafe67ff7dc96be36822908e70.png)
目前需要学习Vue3吗？
- 在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
- 它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
- 在vue3刚刚发布时，很多人也是跃跃欲试，想要尝试vue3的各种新特性。
- 但是事实上在刚刚发布的时候我们使用vue3来写demo练习是没有问题的，真正在实际业务项目中使用vue3还需要一 个相对的过程；
- 包括vue3的进一步稳定、包括社区更多vue3相关的插件、组件库的支持和完善。
- 那么现在是否是学习vue3的时间呢？
- 答案是肯定的。
- 首先vue3在经过一系列的更新和维护后，已经是趋于稳定，并且在之前尤雨溪也宣布在今年（2021年）第二季度会 将vue3作为Vue CLI的默认版本了.
- 目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以 很多公司目前新的项目都已经在使用Vue3来进行开发了.
- 并且在面试的时候，几乎都会问到各种各样Vue3、Vite2工具相关的问题
Vue3带来的变化（源码）
源码通过monorepo的形式来管理源代码：
- Mono：单个 pRepo：repository仓库 p主要是将许多项目的代码存储在同一个repository中；
- 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
- 而且模块划分的更加清晰，可维护性、可扩展性更强；
源码使用TypeScript来进行重写：
- 在Vue2.x的时候，Vue使用Flow来进行类型检测；
- 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了。
Vue3带来的变化（性能）
使用Proxy进行数据劫持：
- 在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的；
- 这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；
- 所以在Vue2.x的时候，不得不提供一些特殊的API，比如 s e t 或 set或 set或delete，事实上都是一些hack方法，也增加了 开发者学习新的API的成本；
- 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到
删除了一些不必要的API：
- 移除了实例上的$on, $off 和 $once；
- 移除了一些特性：如filter、内联模板等
包括编译方面的优化：
- 生成Block Tree、Slot编译优化、diff算法优化
Vue3带来的变化（新的API）
由Options API 到 Composition API：
- 在Vue2.x的时候，我们会通过Options API来描述组件对象；
- Options API包括data、props、methods、computed、生命周期等等这些选项；
- 存在比较大的问题是多个逻辑可能是在不同的地方：
- 比如created中会使用某一个method来修改data的数据，代码的内聚性非常差
- Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找
Hooks函数增加代码的复用性：
- 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑；
- 但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题；
- 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的；
如何使用Vue呢
Vue的本质，就是一个JavaScript的库：
-
刚开始我们不需要把它想象的非常复杂；
-
我们就把它理解成一个已经帮助我们封装好的库；
-
在项目中可以引入并且使用它即可
那么安装和使用Vue这个JavaScript库有哪些方式呢？
- 方式一：在页面中通过CDN的方式来引入；
- 方式二：下载Vue的JavaScript文件，并且自己手动引入；
- 方式三：通过npm包管理工具安装使用它（webpack再讲）；
- 方式四：直接通过Vue CLI创建项目，并且使用它
CDN引入
CDN的概念
什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩 写：CDN）
- 它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器；
- 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；
- 来提供高性能、可扩展性及低成本的网络内容传递给用户
常用的CDN服务器可以大致分为两种：
- 自己的CDN服务器：需要购买自己的CDN服务器，目前阿里、 腾讯、亚马逊、Google等都可以购买CDN服务器；
- 开源的CDN服务器：国际上使用比较多的是unpkg、 JSDelivr、cdnjs
CDN引入Vue3
Vue的CDN引入：
<script src="https://unpkg.com/vue@next"></script>
代码示例：
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
template:'<h2 style="color:red">hello Vue3！</h2>'
});
// 挂载app到id为app的div上
app.mount('#app');
</script>
</body>
下载引入
下载Vue的源码，可以直接打开CDN的链接：
在浏览器地址栏上输入：https://unpkg.com/vue@next
- 打开链接，复制其中所有的代码；
- 创建一个新的文件，比如vue.js，将代码复制到其中；
通过script标签，引入刚才的文件：
<script src="../vue/vue.js"></script>
代码示例：
<div id="app"></div>
<script src="../vue3/vue3.js"></script>
<script>
const app = Vue.createApp({
template:'<h2 style="color:red">hello Vue3！</h2>'
})
app.mount('#app')
</script>
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
