持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情juejin.cn/post/714765…
最近一直再学习Vue3和Vue2的区别。很多vue3的功能和vue2都基本差不多，只是一些小点需要注意。但是学习的太多了，很难背下来了。 今天上午学习了半天，总结了一些自己学习到的知识，还有部分代码。
- 选项式api是只能在当前这个组件里，别的组件用不了，得传值
- 组合式api（组合式函数）里面都是js的写法了。可以以模块化的方式进行引入。它是可以实现复用的。
自定义指令
自定义指令作用
主要是对DOM的操作进行封装。更关注DOM的操作。而组合式函数（组合式Api）关注的是js数据的操作。
- 自定义指令里的钩子函数Vue2和Vue3是不一样的。Vue3里的自定义指令钩子函数和Vue3组件生命周期是一致的了。钩子函数也是可选的。
- 每个钩子函数里的参数依然是el，binding，vnode，prevNode。 如果自定义指令指向用在mounted或者update中，可以进行简写。
全局简写
import {createApp} from "vue"
import App from "./App"
let app = createApp(App)
app.directive('color',()=>{
想在mounted和update钩子函数中做什么就在这里写就可以了
})
app.mount('#app')
<Transition>动画
实现原理：和Vue2是一样的。先看有没有css动画，再去看是否有js钩子函数动画，如果都没有直接进行切换。多使用css动画。如果使用了js钩子动画，可以给组件添加:css="false"，这样的话在渲染时不会再看是否有css动画。
应用的地方：
- 由
v-if所触发的切换 - 由
v-show所触发的切换 - 由特殊元素
<component>切换的动态组件 - 六个类名只有
v-enter被改为了v-enter-from，其他的还是一样的。
<TransitionGroup>组件
应用场景：用在v-for中
- 如果想给一个组件传一个组件，就利用插槽传
- appear属性：给动画组件添加该属性，组件初次渲染时就会有动画效果。
- 总体来说vue2和vue3的动画效果没有太大差别，vue2动画有的属性vue3里都适用。
<KeepAlive>组件
和在vue2中用法相同，都会涉及两个钩子函数(actived和deactived)。只不过Vue2中组件名用的是<keep-alive>
<Teleport>模态框
应用场景：当我们想点击某个按钮，在页面上弹出一个覆盖整个页面的提示框，可使用该组件。
具体使用方法：先用v-if把要弹出的提示框进行渲染。同时设置最外层元素的样式。利用position:fixed；把v-if所在的根元素用<Teleport>组件包裹起来，给该组件添加to属性，值可以是某个标记的名字，例如to="body"，那么整个v-if所在的根元素会相对于body进行定位；值也可以设置成类名。
