Vue3组合式API详解 - 大型应用的高端写法

目录

  • 01-setup方法与script_setup及ref响应式
  • 02-事件方法_计算属性_reactive_toRefs
  • 03-生命周期_watch_watchEffect
  • 04-跨组件通信方案provide_inject
  • 05-复用组件功能之use函数
  • 06-利用defineProps与defineEmits进行组件通信

01-setup方法与script_setup及ref响应式

  • 在Vue3.1版本的时候,提供了setup方法;而在Vue3.2版本的时候,提供了script_setup属性
    • setup方法是需要把数据进行return后,才可以在template标签中进行使用。
    • setup属性方式定义好后就可以直接在template标签中进行使用。Vue3组合式API详解 - 大型应用的高端写法_第1张图片
  • ref响应式
    • 在组合式API中来完成数据的响应式操作,通过的就是ref()方法,需要从vue模块中引入这个方法后才可以使用。
      Vue3组合式API详解 - 大型应用的高端写法_第2张图片
    • count数据的修改,需要通过count.value的方式,因为vue底层对响应式数据的监控必须是对象的形式,所以我们的count返回的并不是一个基本类型,而是一个对象类型,所以需要通过count.value进行后续的操作
    • ref()方法还可以关联原生DOM,通过标签的ref属性结合到一起,也可以关联到组件上
      Vue3组合式API详解 - 大型应用的高端写法_第3张图片

02-事件方法_计算属性_reactive_toRefs

  • 在组合式API中实现事件方法和计算属性
    Vue3组合式API详解 - 大型应用的高端写法_第4张图片
  • reactivetoRefs
    • reactive()方法是组合式API中另一种定义响应式数据的实现方式,它是对象的响应式副本
      Vue3组合式API详解 - 大型应用的高端写法_第5张图片
  • ref()reactive()这两种方式都是可以使用的,一般ref()方法针对基本类型的响应式处理,而reactive()针对对象类型的响应式处理,当然还可以通过toRefs()方法把reactive的代码转换成ref形式
    Vue3组合式API详解 - 大型应用的高端写法_第6张图片

03-生命周期_watch_watchEffect

  • 生命周期对比
    Vue3组合式API详解 - 大型应用的高端写法_第7张图片

  • watchEffect 函数

    • 它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
  • watchEffect常见特性:

    • 一开始会初始触发一次,然后所依赖的数据发生改变的时候,才会再次触发
    • 触发的时机是数据响应后,DOM更新前,通过flush: ‘post’ 修改成DOM更新后进行触发
    • 返回结果是一个stop方法,可以停止watchEffect的监听
    • 提供一个形参,形参主要就是用于清除上一次的行为
      Vue3组合式API详解 - 大型应用的高端写法_第8张图片
  • watch侦听器的使用方式:
    Vue3组合式API详解 - 大型应用的高端写法_第9张图片

  • watchwatchEffect的区别是什么呢?

    • 懒执行副作用
    • 更具体地说明什么状态应该触发侦听器重新运行
    • 访问侦听状态变化前后的值

04-跨组件通信方案provide_inject

  • 依赖注入

    • 在Vue中把跨组件通信方案provide_inject也叫做依赖注入的方式
      Vue3组合式API详解 - 大型应用的高端写法_第10张图片
  • 依赖注入使用的时候,需要注意的点:

    • 不要在inject中修改响应式数据,可利用回调函数修改
    • 为了防止可设置成 readonly

05-复用组件功能之use函数

为了更好的组合代码,可以创建统一规范的use函数,从而抽象可复用的代码逻辑。利用use函数可以达到跟mixin混入一样的需求,并且比mixin更加强大
Vue3组合式API详解 - 大型应用的高端写法_第11张图片
通过useCounter函数的调用,就可以得到内部return出来的对象,这样就可以在.vue文件中进行功能的使用,从而实现功能的复用逻辑。

06-利用defineProps与defineEmits进行组件通信

  • defineProps是用来完成父子通信的,基本使用跟选项式中的props非常的像
    Vue3组合式API详解 - 大型应用的高端写法_第12张图片
  • defineEmits是用来完成子父通信的,基本使用跟选项式中的emits非常的像
    Vue3组合式API详解 - 大型应用的高端写法_第13张图片

你可能感兴趣的:(前端,javascript,vue.js,前端)