Vue3中的组合Api与响应函数

已于 2022-11-22 14:29:11 修改
阅读量814 收藏 1
点赞数
分类专栏： Vue 文章标签： javascript 前端 vue.js
于 2022-11-22 11:14:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45605541/article/details/127978969
版权

文章目录

1. 组合Api介绍

组合Api其实时用于解决功能、数据和业务逻辑分散的问题，使项目更益于模块化开发以及后期维护。

vue2.x — optionsApi 配置式Api — react类组件

vue3.x — compositionApi 组合Api — react函数组件中hook

setup

  • 它是vue3新增的一个配置项，值为一个函数,所有的组合式 API 方法都写在 setup函数中。
  • 组件中用到的数据,方法 计算属性，事件方法，监听函数，都配置在setup 中。
  • setup的函数值为一个函数，该函数的返回值为一个对象，对象中的属性和方法均可以在模板中直接使用。
  • setup默认情况下不能使用async/await,在读取数据时它只能是json对象，才能读取到里面的属性值，如果你后续使用了异步组件+Suspense组合，可以使用async/await
  • setup中不能使用this
  • setup有两个参数，参数1对应就是props属性对象，但是它不能解构，一但解构响应式就失效,参数2为一个context对象，此对象中有包含attrs, slots, emit，expose。
  • setup选项在组件创建之前执行，一旦props被解析，它就执行了。

2. 响应函数

2.1 ref

ref 的作用是创建一个响应式的数据对象，通过 .value 获取值，主要是对String、Number、Boolean等基本类型的数据响应。

首先来看一下，什么是无法响应的数据：

<template>
  <div>
    <h3>{{ num }}</h3>
    <button @click="addNum">+++</button>
  </div>
</template>

<script>
export default {
  // setup中不能使用this
  // 它必须要有一个返回值，它可以返回 json 对象、函数、async setup()
  // json对象，对象中的属性，可以直接在模板中使用
  // 函数，它就当作是一个组件结构，当前组件不需要 template => render
  // async setup() 当作异步组件 结合 Suspense来使用
  setup() {
    // 定义了一个普通的变量，它不是一个响应式的变量
    let num = 100

    // methods
    const addNum = () => {
      num++
      console.log('setup addNum', num)
    }

    // 此处相当于之前data配置
    return { num, addNum }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

视图中的 num 并没有发生改变。

定义一个响应式的变量：

<template>
  <div>
    <!-- 如果num它是一个ref定义的响应式变量，在模板中调用，你无须写 num.value -->
    <!-- 模板在解析的过程中会给你补上 -->
    <h3>{{ num }}</h3>

    <h1 ref="titleRef">我是一个标题</h1>
    
    <button @click="addNum">+++</button>
  </div>
</template>

<script>
import { ref, shallowRef } from 'vue'
export default {
  // setup中不能使用this
  // 它必须要有一个返回值，它可以返回 json 对象、函数、async setup()
  // json对象，对象中的属性，可以直接在模板中使用
  // 函数，它就当作是一个组件结构，当前组件不需要 template => render
  // async setup() 当作异步组件 结合 Suspense来使用
  setup() {
    // 定义一个响应式的变量
    // 如果ref赋值的为基础类型，是它是用Object.defineProperty来进行响应式处理
    let num = ref(100)
    
    // 绑定到dom元素或自定义组件上
    let titleRef = ref(null)

    // methods
    const addNum = () => {
      // num++
      // 如果你的num它是一个ref定义的响应式变量，则在js中操作它，一定要xx.value来操作
      num.value++

      console.log('setup addNum', num.value)

      console.log(titleRef.value)
    }

    // 此处相当于之前data配置
    return { num, addNum, titleRef }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

对引用类型的响应式处理：

<template>
  <div>
    <div>{{ user1.age }}</div>
    <input type="number" v-model.number="user1.age" />

    <div>{{ user2.age.n }}</div>
    <input type="number" v-model.number="user2.age.n" />
  </div>
</template>

<script>
import { ref, shallowRef } from 'vue'
export default {
  setup() {
    // 如果ref赋值的为引用类型，它是用Proxy来进行响应式处理
    // 引用类型
    let user1 = ref({ id: 1, age: 10 })
    let user2 = ref({ id: 1, age: { n: 100 } })

    // 此处相当于之前data配置
    return { user1, user2 }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

shallowRef：

只处理基本数据类型的响应式, 不进行对象的响应式处理。

<template>
  <div>
    <h3>{{ num.n }}</h3>
    <button @click="addNum">+++</button>
  </div>
</template>

<script>
import { shallowRef } from 'vue'
export default {
  setup() {
    // 只处理基本数据类型的响应式, 不进行对象的响应式处理。
    let num = shallowRef({ n: 200 })
    const addNum = () => {
      // num.value.n++，不再会发生响应式
      // 只能使用下面这种方式进行响应式处理，因为 shallowRef 只能处理基本数据类型
      num.value = { n: num.value.n + 1 }
    }
    return { num, addNum }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

2.2 reactive

如果说 ref 的作用是把一个个数据拆分出来，那么 reactive 的作用就是把数据整合在一起。reactive 的响应式使用 proxy 实现的，它只能处理对象。

深层监听：

<template>
  <div>
    <h3>姓名：{{ state.name }} --- {{ state.age.n }}</h3>
    <input type="number" v-model.number="state.age.n" />
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
// ref 把数据拆分出来 id  name age
// reactive 它可以把数据整合在一起，响应式用的就是Proxy,它只能处理对象
import { reactive } from 'vue'
export default {
  setup() {
    // 数据响应式的方式为 Proxy，它参数必须为object  深层监听
    const state = reactive({
      name: '张三',
      age: { n: 22 }
    })
    
    const setName = () => {
      // console.log(state)
      // 修改reative中name属性值 ref-- xxx.value  reactive -- state.xx = xx
      state.name = Date.now() + ''
    }
    return { state, setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

浅层监听：

这种情况一般不用，用的更多的是 Ref ，使用 shallowReactive 大多是情况下只是为了性能优化。

<template>
  <div>
    <h3>姓名：{{ state.name }} --- {{ state.age.n }}</h3>
    <input type="number" v-model.number="state.age.n" />
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
// ref 把数据拆分出来 id  name age
// reactive 它可以把数据整合在一起，响应式用的就是Proxy,它只能使用对象
import { shallowReactive } from 'vue'
export default {
  setup() {
    // 浅层监听，只监听对象的第1层
    const state = shallowReactive({
      // 姓名会发生变化
      name: '张三',
      // 年龄不会发生变化
      age: { n: 22 }
    })

    const setName = () => {
      state.name = Date.now() + ''
    }

    return { state, setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

2.3 toRef和toRefs

在使用 reactive 时，在模板中每次都要写 state. 会让代码变得很繁琐，于是我们可以想到，可不可以在 setup 的返回值中，将 state 结构出来，让模板中减少取数据的层级呢？

<template>
  <div>
    <h3>姓名：{{ name }} --- {{ age.n }}</h3>
    <input type="number" v-model.number="age.n" />
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: { n: 22 }
    })

    const setName = () => {
      state.name = Date.now() + ''

      console.log(state, { ...state })
    }

    // 在setup中reactive引用对象，不能解构，解构它就破坏了响应式
    return { ...state, setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

很显然，我们的需求没有实现，在解构 state 后发现，修改姓名并不能响应式的发生改变，但是修改年龄依然可以实现响应式。

从控制台中我们可以发现，state 在解构前是被 proxy 劫持的，而解构后，就变味了普通的 js 对象，不再具有响应式，但是 age 仍然是一个 proxy 对象。

在这里插入图片描述

显然解构并不能实现在模板中减少数据提取的层级，那该怎么办呢？

vue3 为我们提供了 toRef 函数。

toRef：

<template>
  <div>
    <h3>姓名：{{ name }} --- {{ age.n }}</h3>
    <input type="number" v-model.number="age.n" />
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
import { reactive,toRef } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: { n: 22 }
    })

    const setName = () => {
      state.name = Date.now() + ''

      console.log(toRef(state, 'name'))
    }

    return { age: toRef(state, 'age'), name: toRef(state, 'name'), setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

这时候我们可以看到，name 在使用 toRef 后，可以进行响应式，同时在控制台中也可以看到 name 还是一个 peoxy 对象。

toRef 在 setup 的return 中依然需要写很多代码，有没有更简便的写法呢？

vue3 为我们提供了 toRefs。

toRefs：

<template>
  <div>
    <h3>姓名：{{ name }} --- {{ age.n }}</h3>
    <input type="number" v-model.number="age.n" />
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: { n: 22 }
    })

    const setName = () => {
      state.name = Date.now() + ''
    }

    return { ...toRefs(state), setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

toRef 和 toRefs 需要分场景使用，当我们只需要一两个数据时，用 toRef 比较合适，当需要用到所有数据时 toRefs 更加方便。

2.4 readonly

设置为只读属性。

<template>
  <div>
    <h3>{{ state.name }}</h3>
    <button @click="setName">修改姓名</button>
  </div>
</template>

<script>
// 赋值的数据它是一个只读的,不能修改，只能读取
import { readonly } from 'vue'
export default {
  setup() {
    let state = readonly({ name: '张三' })
    const setName = () => {
      state.name = Date.now() + ''
    }

    return { state, setName }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

2.5 customRef

用于自定义一个 ref。

首先通过 customRef 定义一个具备防抖功能的 ref ，自定义 ref 在工作中通常会封装在 hooks 中。

useDebouncedRef.js：

// 防抖
import { customRef } from 'vue'

const useDebouncedRef = (value, delay = 300) => {
  let timeout
  // track 响应收集，在获取时，收集
  // trigger 响应 在你设置时触发，通知视图更新
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

export default useDebouncedRef

App组件：

<template>
  <div>
    <h3>{{ num }}</h3>
    <input type="number" v-model="num" />
  </div>
</template>

<script>
import useDebouncedRef from './hooks/useDebouncedRef'

export default {
  setup() {
    let num = useDebouncedRef(100)

    return { num }
  }
}
</script>

<style lang="scss" scoped></style>

在这里插入图片描述

月光晒了很凉快
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3中Options API(学习)代码
11-05
Options API开发模式学习代码，欢迎大家下载评论
关于Vue3中对于响应式API和组合式API的理解
doupengzp的博客
11-09 1174
Vue3经过多个版本的更新迭代已经逐渐的趋于稳定，在看官方的文档中发现了官方所有的文档都有两种格式的API，响应式API和组合式API。
【vue3】组合式函数
zhaohb2016的博客
08-22 3536
vue3中提出了关于组合式函数的方法，与react中的hooks相同功能，比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法。
【Vue3】组合式函数
m0_48799309的博客
08-09 440
名字的由来：一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。组合式函数是指利用组合式API封装和复用携带状态的逻辑的函数（感觉有点像mixin，因为它会携带状态）描述：将一个图片接口封装成一个组合式函数，调用时需要提供地址和方式两种参数，获取到地址、响应状态和错误信息这三个数据。说白了：函数内部定义数据，内部处理出数据处理的逻辑，返回数据。②有状态逻辑函数：负责管理会随时间而变化的状态。
【vue3 组合式函数】
前端-CV全粘工程师
08-28 379
导入refreactive等需要使用的函数或对象。编写需要被组合的逻辑代码，例如数据处理、异步请求等。将这些逻辑代码封装在一个函数中，并返回一个包含需要使用的数据和方法的对象。在需要使用这些逻辑代码的组件中，使用setup函数来导入组合式函数并进行调用。// 定义需要被组合的逻辑代码// 发送异步请求return {data,loading,loadDatasetup() {return {data,
Vue3 组合式函数
前端知识分享喵
03-28 1340
：“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。这里需要提一下的概念：它只包括了可重用的逻辑 (数据获取、分页等) 而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。大部分能用无渲染组件实现的功能都可以通过组合式 API 以另一种更高效的方式实现，并且还不会带来额外组件嵌套的开销。
Vue3的组合式函数
qq_2511276124的博客
11-16 3354
vue2的时候，以一个vue文件是按照vue给的模块文件来写的，也就是选项式API写法（一个文件里有template、script、style）。现在vue3新出了一个组合式API写法（一个文件里有template、script、style）。两者区别主要在script部分，选项式API写法中，script是已经预设了属性方法使用方式的，例data、components、computer、watch、methods等；组合式API写法则没有预设（根据暴露的方法或属性按照自己的想法写）。
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3组合式api.xmind
06-16
Vue3组合式api
实现基于Vue3组合式API的登陆系统
04-07
在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。相较于传统的web...
基于FastAPI和Vue3的Python管理后台设计源码
最新发布
03-29
该项目是一个快速开发的管理后台，采用了流行的技术栈，包括Python3、FastAPI、Vue3、vite2和Element Plus1.2（ElementUI）。适合用于个人学习和实践Python、JavaScript、Vue、CSS、TypeScript和HTML的开发技术。
Vue3的一些组合式函数
wytccc的博客
07-12 179
1. **readonly()和shallowReadonly()** ① readonly()是将属性全部变为只读的，依然存在响应式 ② shallowReadonly()只是将第一层变为只读的（浅层次的） 2. **toRaw()和markRaw()** ① toRaw()是可以将一个由reactive生成的响应式数据转为普通数据 ② markRaw()是将一个数据标记为源数据。应用场景：已经初始化了一个对象，之后手动给这个对象添加属性的时候，vue默认将其转为响应式数据，通过mar
Vue3组合式函数 —— Vue hooks
Yana's Blog
09-30 736
前言摘抄自Vue.js官网组合式函数介绍在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
Vue3：组合式函数（引入外部ts文件，修改外部ts参数）
weixin_62364503的博客
09-19 6312
vue3中不在推荐使用mixins，在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，是现在更推荐的方式。在不使用mixins的情况下，外部js无法调用vue页面中参数，所以我们需要调用方法或者调用ts中的参数时。需要通过将参数和方法暴露出来。在外部的ts文件中我们可以使用vue的API，例如：onMounted,onUnmounted...
Vue3组合式函数 - 18
qq_25906119的博客
12-20 221
Vue3 函数式组件，组合函数，hooks
vue3 hooks的简单使用 组合式函数
weixin_43957384的博客
02-20 290
vue3 组合式函数 hooks
vue3：详解组合式函数
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-15 518
vue3的核心-组合式函数
Vue3：组合API-toRefs函数
m0_58875280的博客
09-18 188
朋友们晚上好呀,讲toRefs函数。
vue3源码之 组合式api
newway007的博客
04-22 507
vue3 提供了setupAPI来提供组合式API的使用. 我们开回顾一下vnode的挂载过程: const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { // 创建组件实例 const instance = (initialVNode.component = createComponentInstance(initialV
vue3组合式Api使用
03-07
2. setup函数：在Vue 3中，我们需要在组件中使用setup函数来定义组合式API。setup函数在组件创建之前执行，并且接收两个参数：props和context。我们可以在setup函数中定义响应式数据、计算属性、方法等。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值