VCA学习记录
VCA(Vue Composition API)
简介：
在 Vue 3 中，组合式 API（Composition API）是一种用于创建自定义组件的 API，它提供了一种更灵活和可组合的方式来创建组件。
组合式 API 提供了一种将组件的逻辑和样式分离的方法，使您可以更轻松地管理和维护组件的代码。通过使用组合式 API，您可以创建具有更灵活性和可维护性的组件。
优点如下：
- 灵活性：组合式 API 允许您将组件的逻辑和样式分离，使您可以更轻松地管理和维护组件的代码。
- 可维护性：组合式 API 提供了一种更灵活和可组合的方式来创建组件，使您能够创建具有更灵活性和可维护性的组件。
- 可复用性：组合式 API 使您可以创建可复用的组件，从而减少代码冗余并提高代码质量。
- 易于测试：组合式 API 使您可以更容易地测试组件，并确保组件的逻辑正确。
- 更好的可读性：组合式 API 使组件更易于阅读和理解，并提高了代码的可读性。
- 更好的性能：组合式 API 使您能够更好地控制组件的性能，并确保组件在加载速度方面表现良好。
使用
组件中使用VCA
1. 创建响应式变量：reactive,ref,toRef,toRefs
reactive和ref：
两者都可以将一个变量包装成一个响应式对象，区别在于： ref支持对简单数据类型进行包装，并提供value属性用于访问和修改。而reactive是基于proxy对变量进行封装，只支持对对象和数组的封装。
示例代码如下：
setup函数是一个在组件实例创建之前定义组件状态和选项的函数，在此函数中this是无效的
{{state.name}}--{{state.age}}
{{location}}
{{otherState.name}}-{{otherState.age}}-{{otherState.location}}
【注】：ref依然可以实现绑定在dom获取dom节点以及绑定在组件获取组件实例的功能，但是在setup函数中，它是一个包装函数，在使用时，模板中可以直接访问它的值，但在方法中操作时需要用value属性去访问和修改。
toRef,toRefs
toRef用于将对象的某个属性转为响应式，toRefs用于将整个对象的所有属性都转为响应式
用法： 经过toRef和toRefs处理，在模板中使用的感觉更像vue2
{{name}}--{{age}}
{{myName}}--{{myAge}}
2. 计算属性： computed
计算属性（Computed Property）是一种响应式变量，它通过一个表达式来获取它的值，而不是通过数据访问器（Data Access Tester）来获取。并且只有当计算属性依赖更新的时候才会重新计算，在计算属性中不能进行异步操作。
使用示例： 模糊查询功能:computed接受一个回调函数，返回处理后的数据
- {{item}}
3.侦听器：watch/watchEffect
watch: 监听某个值变化，如果变化可以执行响应的操作
watch具有一定的惰性，第一次页面展示的时候不会执行，除非加上immediately,当数据变化的时候才会执行
参数可以拿到当前值和原始值
可以侦听多个数据的变化，用一个侦听器承载，
watch的第三个参数是一个对象，{immediate:true,deep:true}，immediate表示立即执行，在页面初始化的时候会自动执行，deep表示深度监听一个对象，当对象任意级和任意属性值发生变化时都会执行，因此使用deep:true要特别注意，会十分浪费性能。
watchEffect:
立即执行，没有惰性
自动检查内部代码，代码中有依赖便会执行
不需要传递侦听的内容，会自动感知代码的依赖，不需要传递很多的参数，只需要传递一个回调函数
不能获取之前的值，只能获取当前值
一些异步的操作放在这里会更合适
示例代码：
- {{item}}
4. props&emit
props用于父组件向子组件传值，emit用于子组件像父组件传值，在VCA的写法中，setup函数的第一个参数是props传过来的所有属性，第二个参数config包含slots、emit、attrs等方法，因此父子组件互相通信可以写成如下方式：
props用于父组件向子组件传值，emit用于子组件像父组件传值，在VCA的写法中，setup函数的第一个参数是props传过来的所有属性，第二个参数config包含slots、emit、attrs等方法，因此父子组件互相通信可以写成如下方式：
// 父组件
5. provide&inject
provide和inject可以组合实现非父子跨级通信，在vca中的写法如下：inject和provide都是从vue中引入的
// 父组件
- {{item}}
在SPA中使用VCA
在script标签上直接使用setup,
优势： 更少的模板 更简洁的代码
能够使用TS声明props和自定义事件
更好的运行时的性能，其模板会被编译成同一作用域的渲染函数，避免了渲染上下文对象
更好的IDE推理性能，减少了语言服务器从代码中抽取类型的工作
#### 1.单文件组件写法
{{computedName}}--{{myMsg}}