Vue3 组合式API
在vue2的版本里，数据和函数是分开维护的，并且调用时还要用到mount或者Create。
但是在vue3的版本里，经过setup的语法糖，能够实现集中式维护，一个功能写的代码能放在一起，且代码量更少了。
使用create-vue创建项目
- 在工作目录下，用命令行运行npm init vue@latest
- 按照指示一步步建立。
- 成功建立后，在项目目录下运行npm install 下载环境，然后运行。
项目目录和关键文件
项目配置文件变成了基于vite的配置
核心依赖还是package.json
入口文件还是main.js
根组件还是app.vue 但是vue格式发生了变化
首先script到了最上面，template到了中间。
template不再需要根div元素
script支持vue3最大的特色，组合式api。
Set up
setup 可以写在vue2的形式里，发生在beforeCreate函数之前，组件挂载完毕之后。
默认的写法，在定义完数据和函数之后，需要将数据return。
使用的时候和vue2一样，直接绑定click事件，用{{}}绑定数据。
用setup语法糖，这样只需要定义数据和方法就行，return工作已经完成了。
经过语法糖的封装能更简单的使用组合式api。
ref（）
ref简单来说就是生成一个响应式对象。
用这些函数都要有一个通用的过程，1 导入 2 执行接收
reactive()
用法与ref类似，但是只能传入类型为对象的初始值。
ref和reactive异同点：
reactive和ref函数都是通过函数调用的方式生成响应数据。
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive
更推荐使用ref函数，更加灵活。
computed 计算属性函数
通用的步骤还是没少，1 、导入 2、用变量接收
用变量接收 computed函数，里面参数是一个回调函数，return的是基于响应式数据做计算的值。
watch函数
watch的作用是侦听一个或者多个数据的变化，数据变化时执行回调函数
通用的步骤一样 1 导入 2 执行函数
watch函数的基础用法，有2个参数：
1. 侦听变化的数据
2. 回调函数，回调函数里有2个参数，前者是更新后的值，后者是更新前的值
侦听多个数据和单个数据类似，
只是参数里面装的是数组。
watch函数有两个额外的参数：
1. immediate
2. deep
immediate通常用来给出相应的搜索提示，侦听器刚创建的时候就会调用。
watch监听的ref对象是浅层的，如果是对象里的某个值发生改变，则不会调用watch函数，此时要加deep参数。
但是deep函数消耗的资源很多，一般不推荐这样写，因为对象侦听通常是针对对象的某个属性，所以可以用下面的进阶写法。
精确侦听对象的某个属性
这里的watch函数，
第一个参数的位置，从某个需要侦听的变量，修改成了一个回调函数，回调函数需要指明需要侦听的对象的某个属性。
第二个参数不变。
作为watch函数的第一个参数，ref对象不需要添加.value。
不开启deep，需要在第一个参数写成函数的写法，返回需要监听的具体属性。
生命周期函数
这里的生命周期函数 vue3与vue2相比，绝大多数前面只需要加一个on就行了。
但是beforeCreate和created的API被组合成了setup。
使用起来很简单，1 导入 2 调函数。
可以执行多次，使用的业务场景就是原来的函数太复杂，在不动代码的情况下加一些业务逻辑，可以直接再起一个函数。
父子通信
父组件要传变量值给子组件的时候，
父组件要在子组件内绑定属性，这一点和vue2一样。
子组件通过defineProps函数接收，这个叫“编译器宏”之后会讲到。
接受的时候名字要对应，数据类型也要指明。
子传父的做法是绑定事件，通过绑定事件接收子组件传过来的变量。
子组件通过编译器宏defioneEmits生成emit方法，里面放的是绑定事件的名称。
通过emit（事件名称，传的数据）向父组件传递。
父组件通过该事件的回调函数，设一个参数接收这个数据。
模板引用
vue2是通过$refs得到绑定的ref对象的
在vue3中，得到了更快捷的方式。
只需要先用ref生成一个ref对象，
再通过ref标识绑定ref对象到标签即可使用。
provide和inject
project 和 inject 的 作用就是实现跨层组件通信，某个父级组件和子级组件进行通信。
使用方法很简单，不再赘述。
这里需要说明的是，每个组件只能修改本组件的数据，如果要实现跨组件修改，可以传递方法，底层组件调用方法修改顶层组件中的数据。
标签：01,函数,--,绑定,watch,参数,Vue3,组件,ref From： https://www.cnblogs.com/xiaochaoheni/p/17390390.html