昨天学习了一下vue3的知识，主要是从官方文档入手，通读了一遍，感觉还不错，想赶紧用起来。
和vue2差不多，包括插值表达式，模板语法，条件渲染，列表渲染，事件处理，都是一样的用法，这里只记录我认为比较新的东西。
模板引用
给元素添加一个ref属性，并且指定名称，然后可以通过申明一个相同名字的ref对象来获取该属性，这个我试过了，可以直接获取到dom元素，进行操作。
setup
我比较习惯于直接在script中添加setup，这样不用写export，更简洁一些，还有就是在setup里不能使用this，直接访问就好了。
definepros函数可以直接调用，不用引入。
常用的computed，watch，mounted这些，都需要引入才能使用。
响应式计算
提供两个：ref和reactive
ref一般用于简单属性的数据，reactive一般用于属性比较复杂的数据，因为可以监听到深层次的数据变化，从而实现响应式。
reactive可以用用于对象，数组map，set，这样的类型，而不能用于string，number，boolean这样的原始类型。
如果用ref声明一个复杂的数据类型，也会被自动转为reactive，所以一般使用ref就够了。
组件
组件算是vue的核心概念了，vue3中最大的改变就是，setup写在script里的时候，不用写组件的名字，也不用导出，会自动注册。
defineprops函数在setup中不用导入，可以直接使用，用来声明props，也就是组件有属性，父组件传递过去就可以了。
子组件中直接使用props的名字，就能获取到值。
数据流动
一般来说，数据都是从父组件流向子组件的。
也就是说，子组件在其内部声明数据，然后父组件把数据传递给子组件，子组件因此可以显示，父组件的值改变过后，子组件对应的值也会改变，
如果要改变从父组件传过来的值，可以在子组件内部设置一个属性来接收这个值，然后改变接收后的值；或者通过计算属性的方式，获得一个新的值。
父子组件传值
父组件向子组件传值，直接赋予子组件props中名字对应的值就可以。
子组件向父组件传值，需要用到emits，在父组件中定义一个函数，然后通过@把函数名传递给子组件，在子组件中通过$emit(‘fn’,arg)，来调用父组件中的函数，arg就是要传递的值，这种方法也可以用于修改父组件中的数据。
属性继承
如果子组件是一个单元素作为根元素渲染的时候，那么从父组件传递到子组件的属性，就会自动被绑定到根元素上，利用这个方法，可以在父组件上设置子组件根元素的属性，比如class，style，id，或者一些自定义的属性。
如果要禁用属性继承，需要显式设置禁用属性继承，inheritAttrs: false。
如果有多个根元素，则需要$attrs，来指定绑定到那个元素上，否则会有警告，也不会生效，因为vue不知道要把属性绑定到哪个元素上。
::: tip
Vue3中组件不再只有一个根元素，而是可以有多个根元素。
:::
依赖注入
我没想到有一天也能在前端这个领域听到这个词，这个词一般是用于后端语言的，是控制反转的实现方式。
在后端里，大致就是，一个模块要引入其他模块，很多模块之间的引用关系会变得异常复杂，所以这时候就需要一个依赖管理工具，把需要用到的模块放到这个工具里，这个工具简单来说，就是一个引用的集合。
需要用到其他模块的时候，统一向这个工具去拿，而不是去找原来的模块，大白话就是这个依赖管理工具就是各个模块的中间商，当然它是不赚取差价的。
说到vue3的依赖注入，和后端完全不一样。vue3的应用，是用多个组件搭建起来的，那么组件引用组件，必然造成一个上下层，层级多了之后，如果下层的组件要使用不是直接父组件的数据，就需要从上往下一直传递，这样显然是不合适的。
于是就有了依赖注入，主要通过两个函数，provide和inject。
在上层组件，使用provide提供一个属性和其值，然后在需要使用的下层组件，通过inject通过属性名取到对应的值。还是很简单的，和redis差不多，一边set，另一边get。
既然这样，为什么不用store呢，也可以达到这种目的，而且还不限组件内使用，全局都可以使用。
内置组件
transition
在组件进入或者离开的时候会触发动画。具体而言就是v-if和v-show的时候，动态组件切换的时候，也会触发。
transitiongroup
用于对v-for中的元素进行插入，排序和删除时会触发的动画。
keepalive
用于缓存组件状态，在组件和组件之间进行切换的时候。