10分钟快速上手vue3

1,288 阅读3分钟

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

ref和reactive的区别

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

carbon (33).png

defineComponent的作用

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

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

carbon (28).png

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

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

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

watchEffect

参数说明:

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

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

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

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

清除副作用的例子:

carbon (30).png 上图为wactchEffect使副作用失效的例子

watch

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

自定义hook

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

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

carbon (31).png 使用方式:

carbon (32).png

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