VUE3学习总结🤖
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>>
Provide和Inject🤠
Provide和Inject用于非父子组件之间共享数据
实际上可以将依赖看作是：long range props 无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者
父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据
动态组件🤠
动态组件是使用component组件，通过一个特殊的attribute(属性) is来实现
keep-alive🤠
切换组件后，组件会被销毁掉，再回来时会重新创建组件，但是，在开发种某些情况我们希望继续保持组件的状态，而不是销毁掉。
常见的属性:
include -（string|RegExp|Array） 只有名称匹配的组件才会被缓存
(根据子组件的name来匹配)
exclude -（string|RegExp|Array） 任何名称匹配的组件都不会被缓存
max -（number|string）最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件种最近没有被访问的实例会被销毁
知识点🤠
随着项目的代码量和逻辑越来越多，默认情况下，在构建整个组件树的过程种，因为组件和组件之间是通过模块化直接依赖的，那么webpack打包的时候会将组件模块统一打包到app.js里面，会造成首页渲染白屏的效果
所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js，这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容
通过Import函数导入的模块，后续webpack对其进行打包的时候就会进行分包的操作
vue中的分包🤠
vue3中提供了一个函数 defineAsyncComponent，通过异步的方式来进行加载，打包的时候就会进行分包
异步组件和Suspense(悬而未决)🤠
Suspense是一个内置的全局组件，该组件有两个插槽：
default：如果default可以显示，那么显示default的内容
fallback： 如果default无法显示，那么会显示fallback插槽的内容
$refs的使用🤠
vue中不推荐使用dom操作，可以给该元素上绑定ref的attribute属性
$parent 能拿到父组件
$root 能拿到根组件
在开发中不推荐使用，耦合性太强，推荐使用Props
（注意：vue3中已经移除了$children的属性，所以不可以使用了）
$el 能拿到根元素
生命周期🤠
vue3中将destory改为 unmounted 官方将销毁改为卸载
缓存组件（keep-alive）的生命周期🤠
在缓存组件里面是没有created和unmounted的，因为缓存下来了，
但有时候我们确实需要监听生命周期，这时候vue就提供了activated和deactivated两个生命周期
组件使用v-model🤠
父组件通过v-model将message传给子组件
子组件中必须要有modelValue这个值，然后可以通过emit去update父组件的值
在开发里面不要随便去改props里面的值，大忌！
可以通过computed计算属性
组件的v-model是可以传参的，当你的组件需要同时v-model绑定两个值的时候，第二的值（或者更多的值）可以作为v-model的属性来传，然后再在props里面接收，在计算属性中在对值进行更改，来完成双向绑定
vue3的动画🤠
vue中提供了transition内置组件，来实现动画效果
只需要在transiton命名name之后，在style里面添加动画的样式就可以了，无需在对应的组件里面写class
（1、可以在transition里面传type属性来让transition或者animation动画根据哪个来决定
2、我们也可以显示的来指定过渡的时间，通过duration属性
）
原理：当插入或删除包含在trasition组件中的元素时，vue将会做以下处理，自动嗅探目标元素是否应用了css过度或动画，如果有，那么在恰当的时间添加、删除css类名。
v-enter-from:定义进入过渡的开始状态。
v-enter-active：定义进入过渡生效时的状态
v-enter-to:定义进入过渡的结束状态
v-leave-from 定义离开过渡的开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 定义离开过渡的结束状态
mode属性（in-out/out-in） 用在transition组件里面两个元素相互切换
同样在组件之间的切换也是有用的
appear属性：在初次渲染的时候也给予它动画（默认是为true）
常用的动画库：animate.css 是一个已经准备号的，跨平台的动画库
在transition组件里面可以自定义class 来给它赋予动画的效果（优先级高）
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
gsap库（通过js来实现一些动画的效果）
transition组件给我们提供了很多的js钩子
常用的钩子就是enter和leave
:css="false"就希望css动画就失效了，少了检测，性能会高一些
通过import来引入这个库，默认情况下enter和leave钩子函数是会回调的，当done未设置的话，默认是会去调用done的函数，就立即结束，所以在gsap里面有个参onComplete设置为done就当动画执行完毕后再执行done的意思
如果希望渲染的是一个列表，这时候我们要使用组件来完成，默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以tag attribute进行渲染，过渡模式不可用，因为我们不在相互切换特有的元素，内部元素总是需要提供唯一的key值，css过渡的类将会应用再内部的元素中，而不是这个组/容器本身上
新增的v-move的class来完成动画，它会在元素改变位置的过程中应用，像之前的名字一样，我们可以通过name来自定义前缀
