10分钟快速上手vue3

很多使用vue2的同学觉得vue3现在学起来太过碎片化了，实际上我们只要把握几点就可以快速上手vue3.

ref和reactive的区别

1. ref可以传入常量或者对象，而reactive只能传入对象
2. ref的取值需要使用 .value ，因为ref将常量转换为响应式必须为一个对象，受限于proxy API
3. reactive在setup中return时如果使用对象展开符将失去数据的响应性，可以使用toRefs为对象属性值保留响应性

defineComponent的作用

在定义 Vue 组件时提供类型推导的辅助函数。这是一个非常有用的函数。

我们通常是使用Vite创建项目，使用Visual Studio Code + Volar 扩展进行开发。当你发现template中无法提示对象属性以及ts类型时，你可能会觉得是不是Volar出现了哪些配置问题，因为我们使用Vetur时是可以正常提示的。实则不然，你可能是写了如下代码：

此代码中有两个点需要注意：

1. <script lang="ts">
2. export default {} 这两个点是导致template中无法正确提示的原因。解决方式就是使用export default defineComponent({})包裹导出的对象。

值得一提的是，如果你使用的是<script setup lang="ts">则不需要包裹,它并不需要export default

watchEffect

参数说明：

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求 (参见下面的示例)。

第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。

默认情况下，侦听器将在组件渲染之前执行。设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。详见回调的触发时机。在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。

返回值是一个用来停止该副作用的函数。如：stop=watchEffect();stop();之后即使数据变化也不在执行effect。

清除副作用的例子：

上图为wactchEffect使副作用失效的例子

watch

精确监听数据源，和wacthEffect区别：懒执行副作用，可以访问数据前后变化的值，根据指定的值触发watch

自定义hook

自定义hook是为了复用相同代码：使用方式：

1. 使用规定格式的命名，use开头
2. 根据需要导入组合式API，如：reactive
3. 书写业务逻辑，最后return data

使用方式：

总结：vue3最大的好处是使用了typescript，当你发现代码无法提示类型或对象属性时，可以查看script标签，看是否使用了正确格式，然后根据情况使用defineComponent。其次就是掌握它基础的API，ref、reactive、wactchEffect等。总的来说，类型、按需导入、自定义hook把握了这三点，实际开发中我们就可以按图索骥，需要什么就拿什么过来使用即可。