快速上手vue3:ref和reactive的区别

2022-10-2422:47:44WEB前端开发Comments1,763 views字数 1349阅读模式

很多使用vue2的同学觉得vue3现在学起来太过碎片化了,实际上我们只要把握几点就可以快速上手vue3.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

ref和reactive的区别

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

defineComponent的作用

在定义 Vue 组件时提供类型推导的辅助函数。这是一个非常有用的函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

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

快速上手vue3:ref和reactive的区别

此代码中有两个点需要注意:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

  1. <script lang="ts">
  2. export default {}

这两个点是导致template中无法正确提示的原因。解决方式就是使用export default defineComponent({})包裹导出的对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

快速上手vue3:ref和reactive的区别

值得一提的是,如果你使用的是<script setup lang="ts">则不需要包裹,它并不需要export default文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

watchEffect

参数说明:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数,用来注册清理回调。清理回调会在该副作用下一次执行前被调用,可以用来清理无效的副作用,例如等待中的异步请求 (参见下面的示例)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

第二个参数是一个可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

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

watchEffect返回值是一个用来停止该副作用的函数。如:stop=watchEffect();stop();之后即使数据变化也不在执行effect。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

清除副作用的例子:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

快速上手vue3:ref和reactive的区别

上图为wactchEffect使副作用失效的例子文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

watch

精确监听数据源,和wacthEffect区别:懒执行副作用,可以访问数据前后变化的值,根据指定的值触发watch文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

自定义hook

自定义hook是为了复用相同代码:使用方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

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

使用方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

快速上手vue3:ref和reactive的区别

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/29865.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/29865.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定