Vue3组合式API快速入门

已于 2023-08-26 11:02:50 修改
阅读量237 收藏 2
点赞数 1
分类专栏： 开发 文章标签： vue.js javascript 前端
于 2023-08-25 19:58:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50281408/article/details/132484414
版权

文章目录

前言

本文记录了关于Vue3组合式API的大部分常用内容，通过此文可以快速掌握，并使用组合式API，同时本文中所有代码均运行过，没有问题，可直接粘贴运行，喜欢的话望收藏，评论，点赞🎈🎈🎈

提示：以下是本篇文章正文内容，下面案例可供参考

一、🎇组合式API入口-setup

1. setup选项的写法和执行时机

<script>

export default {
  setup(){
    //code
  }
}
</script>

在组件进行渲染时会优先执行setup函数，其执行时期是先于beforeCreate之前。

在这里插入图片描述

代码案例

<template>
  <div>
    main
  </div>
</template>
<script>
export default {
  setup(){
    console.log("setup")
  },
  beforeCreate() {
    console.log("beforeCreate")
  }
}
</script>

在这里插入图片描述

2. 如何使用setup函数

<template>
  <div>
    {{ message }}
  </div>
    <button @click="clikfunc">这是个按钮</button>
</template>

<script>

export default {
  setup() {
    const message = "这是一条信息"
    const clikfunc = () => {
      console.log("按钮被点击",this)
    };
    return {
      message,
      clikfunc
    }
  }
}
</script>

在这里插入图片描述

在setup函数中的数据和方法必须要return出去才能够使用，其中已经没有了this关键字，因vue3语法风格的问题，已经不推荐使用this这个关键字进行数据更改，在setup中打印this也会得到一个undefine，可见this并没有指向组件实例。

3. <script setup>语法糖

在定义了许多变量或者函数时，如果每一个变量和函数都需要return的话，会显的代码十分的冗余，所以就有了<script setup>这种语法糖写法，直接定义，直接使用.

语法糖写法（实现效果与上图一致）

<template>
  <div>
    {{ message }}
  </div>
  <button @click="clikfunc">这是个按钮</button>
</template>
<script setup>
const message = "这是一条信息"
const clikfunc = () => {
  console.log("按钮被点击")
}
</script>

二、🎄组合式API-reactive和ref函数

这两个函数都是类似vue2中的data一样，用于生成响应式数据

1. reactive函数

reactive()：接受对象类型数据的参数传入并返回一个响应式的对象

<template>
  <button @click="setCount">{{ state.count }}</button>
</template>
<script setup>
//1.导入函数
import {reactive} from "vue";
//2.执行函数 传入一个对象类型的参数，并使用变量接收
const state = reactive({
  count: 0
})
const setCount = () => {
  state.count++
}
</script>

在这里插入图片描述

2. ref函数

ref()：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

提示：ref函数是简单类型和对象类型都可以接受，reactive函数只能接受对象类型

<template>
  <button @click="setCount">{{ count }}</button>
</template>

<script setup>
//1.导入函数
import {ref} from "vue";
//2.执行函数 传入一个对象类型的参数，并使用变量接收
const count = ref(0)
const setCount = () => {
  //在脚本区域修改由ref产生的响应式数据，必须通过.value属性
  count.value++
}
</script>

打印count，可以发现ref产生的是一个响应式的对象
在这里插入图片描述

三、🎨组合式API-computed

computed()：计算属性的思想与vue2的是完全一致的，组合式API下只是修改了写法

<template>
  <div>原始的数组-{{ org_list }}</div>
  <div>过滤后的数组-{{ new_list }}</div>
</template>

<script setup>
//1.导入computed函数
import {ref} from "vue";
import {computed} from "vue";

const org_list = ref([1, 2, 3, 4, 5, 6, 7, 8])

//执行函数return计算后的值 变量接收
const new_list = computed(() => {
  return org_list.value.filter(item => item > 2)
})

setTimeout(() => {
  org_list.value.push(9,10)
}, 3000)
</script>

image-20230825102337549
提示：计算属性中不应该有异步请求，修改DOM这些操作，同时避免直接修改计算属性的值，计算属性应该是只读的

四、🎃组合式API-watch

watch的作用与vue2中是一致的，侦听一个或者多个数据的变化，数据变化时执行回调函数

额外的两个参数：

  1. immediate（立即执行）
  2. deep（深度侦听）

1. 基础使用-单个数据的侦听

<template>
  <button @click="setCount">{{ count }}</button>
</template>

<script setup>
//1.导入watch
import {ref, watch} from "vue";

const count = ref(0)
const setCount = () => {
  count.value++
}
//2.调用watch 侦听变化
//此处的ref对象不加.value
watch(count, (newValue, oldVale) => {
  console.log(`count发生了变化,旧值为${oldVale}，新值为${newValue}`)
})

</script>

image-20230825114943236

2. 基础使用-多个数据的侦听

同时侦听多个数据的变化，不管哪个数据变化都需要执行回调

<template>
  <button @click="setCount">{{ count }}</button><br>
  <button @click="setName">{{ name }}</button>
</template>

<script setup>
//1.导入watch
import {ref, watch} from "vue";
//创建两个响应式数据
const count = ref(0)
const name = ref("test")

const setCount = () => {
  count.value++
}
const setName = () => {
  name.value="test被修改了"
}
//2.调用watch 侦听变化
//此处的ref对象不加.value
watch([count,name], ([newCount,newName], [oldCount,oldName]) => {
  console.log(`count发生了变化,旧值为${oldCount}，新值为${newCount}`)
  console.log(`name发生了变化,旧值为${oldName}，新值为${newName}`)
})
</script>

无论点击哪个按钮，都会执行回调函数

image-20230825135355507

3. immediate选项

在某些情况下，我们可能需要在组件初始化阶段就立即执行侦听器，以获取某些初始数据或执行某些操作，这个时候便可开启immediate选项

<template>
  <button @click="setCount">{{ count }}</button>
  <br>
</template>

<script setup>
//1.导入watch
import {ref, watch} from "vue";

const count = ref(0)

const setCount = () => {
  count.value++
}

watch(count, () => {
  console.log("该监听器已被创建")
}, {immediate: true})
</script>

在侦听器创建时(页面刷新时)立即触发回调，响应式数据变化之后继续执行回调

out_demo

4. deep选项

通过watch监听的ref对象默认是浅层侦听，直接修改嵌套的对象属性不会触发回调执行，你需要监听一个由ref产生的对象类型的响应式数据的属性值时，需要开启deep选项。

没有开启deep选项时

<template>
  <button @click="setCount">{{ state.count }}</button>
  <br>
</template>

<script setup>
//1.导入watch
import {ref, watch} from "vue";

const state = ref({count: 0})

const setCount = () => {
  state.value.count++
}

watch(state, () => {
  console.log("数据发生了变化")
})
</script>

数据会修改，但是没有执行回调函数

image-20230825144129940

开启deep选项

//与上述代码一致，只是在watch中开启deep选项
watch(state, () => {
  console.log("数据发生了变化")
},{deep:true})

开启过后，执行了回调函数并打印了语句

image-20230825144234230

5. 精确监听

当你开启deep选项时，就会递归遍历，监听对象的所有属性都会被监听，特别是在处理大型对象或频繁更新的对象时，会造成性能浪费。

<template>
  <div>当前的名字为：{{ info.name }}</div>
  <br>
  <div>当前的年龄为：{{ info.age }}</div>
  <button @click="changeName">修改名字</button>
  <button @click="changeAge">修改年龄</button>
  <br>
</template>

<script setup>
import {ref, watch} from "vue";

const info = ref({name: '张三', age: 18})

const changeName = () => {
  info.value.name = "李四"
}
const changeAge = () => {
  info.value.age = 68
}
//不开启deep选项，精确监听age属性
watch(
    () => info.value.age,
    () => console.log("age发生变化了")
)
</script>

image-20230825153516007

修改name时，控制台没有变化，修改age时，监听到变化，执行回调函数，打印了语句

五、🎁组合式API-生命周期函数

Vue的生命周期指的是Vue实例从创建到销毁的过程，包括开始创建、初始化数据、编译模板、挂载Dom→数据更新→再次编译模板、再次挂载Dom等过程。这个过程总共分为8个阶段：创建前/后，载入前/后，更新前/后和销毁前/后。

官网的生命周期图（组合式）

lifecycle.16e4c08e

Vue3的生命周期API（选项式 VS 组合式）

选项式API组合式API
beforeCreate/createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted

以onMounted函数为例

<template>
  <div>onMounted</div>
</template>

<script setup>
//1.导入
import {onMounted} from "vue";
//2.执行函数
onMounted(()=>{
  console.log("组件挂载完毕")
})
</script>

image-20230825164410926

生命周期函数是可以多次执行的，多次执行时传入的回调会在时机成熟时依次执行

<template>
  <div>onMounted</div>
</template>

<script setup>
//1.导入
import {onMounted} from "vue";
//2.执行函数
onMounted(()=>{
  console.log("onMounted1")
})
onMounted(()=>{
  console.log("onMounted2")
})
</script>

image-20230825164631187

当在一个onMounted中有大量的代码的时候，可以再写一个onMounted进行补充逻辑，换句话说就是，不敢动屎代码的时候，加上去就完事了。

六、🥽组合式API-父子组件通信

1. 父传子

基本思想：

  1. 父组件给子组件绑定属性
  2. 子组件内部通过props选项接收

image-20230825174817026

image-20230825174841815

传入响应式的数据

image-20230825175340231

image-20230825175358920

2. 子传父

基本思想：

  1. 父组件中给子组件标签通过@绑定事件
  2. 子组件内部通过$emit方法触发事件

image-20230825182324566

image-20230825182341037

3. 解决报错

在这一章节中，遇到了两个问题，一个是defineProps没有被定义，一个是组件名称命名问题，这两个问题都是Eslint检测的出的问题

‘defineProps’ is not defined no-undefine

直接引入就行，或者关闭Eslint

import {defineProps} from "vue";

Component name “xxx” should always be multi-word

在组件命名的时候未按照 ESLint 的官方代码规范进行命名，根据 ESLint 官方代码风格指南，除了根组件（App.vue）以外，其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名，遇到该问题时重命名就行了；

七、🎢组合式API-模板引用

通过red标识获取真实的dom对象或者组件实例对象

<template>
  <!--2。通过ref标识绑定ref对象-->
  <h1 ref="h1Ref">这是一个标签</h1>
  <TestCom ref="testComRef"/>
</template>

<script setup>

import {onMounted, ref} from "vue";
import TestCom from "@/components/TestCom";
//1. 调用ref函数
const h1Ref = ref(null)
const testComRef = ref(null)
//组件挂载完毕后才能够获取
onMounted(()=>{
  console.log(h1Ref.value)
  console.log(testComRef.value)
})

</script>

image-20230825184642242

1.difineExpose函数

在自定义组件<TestCom/>中，有内部属性和方法，但是，打印出来的实例对象中却没有，默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，所以可以通过defineExpose编译宏指定哪些属性和方法允许访问。这样设计的主要原因是防止错误修改。

<template>
  <div>这是TestCom组件</div>
</template>

<script setup>
import {ref, defineExpose} from "vue";

const name = ref("test name")

const setName = () => { // eslint-disable-line no-unused-vars
  name.value = "new name"
}
//暴露子组件的属性
defineExpose({
  name
})
</script>

image-20230825185827905

八、🎭组合式API-provide和inject

作用：顶层组件向任意底层组件传递数据和方法，实现跨层组件通信

此处传的静态数据

image-20230825193442811

image-20230825193536782

传响应式数据，在调用provider时，将第二个参数设置为ref对象

image-20230825193900155

image-20230825193908493

顶层传递方法：

image-20230825194633003

image-20230825194722842

注意：谁的数据谁负责修改。

🍜总结

由于本人也是初次系统的学习Vue3的组合式API，所以文中可能有缺漏或有误的知识点，如果您知道的话，望在评论区指出。

笑的像个child
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【Vue3】学习：常用的组合式Api
Triumph_light的博客
10-24 1593
vue3初步学习
Vue 学习笔记12：Vue3常用组合API
Fulling的博客
04-11 2023
Vue 学习笔记11：Vue3组合API一、创建 Vue3 工程1. 使用 vue-cli 创建2. 使用 vite 创建3. 安装 vue3 插件二、常用 composition API1. setup 函数2. ref 函数3. reactive 函数4. Vue3 的响应式5. reactive 对比 ref6. setup 的两个注意点7. 计算属性与监视（1）computed 函数（2）watch 函数（3）watchEffect 函数 一、创建 Vue3 工程 1. 使用 vue-cli 创建
02vue3组合式api看这个.md
06-07
02vue3组合式api看这个.md
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
Vue.js快速入门视频教程
11-25
视频详细讲解，需要的小伙伴自行网盘下载，链接见附件，永久有效。 课程亮点： 课程以实用为主，使学生充分掌握VUEJS如何使用 讲解方式： 从简单到复杂，逐步深入的讲解，让大家更容易学习。 课程内容： VUE是一套用于构建用户界面的渐进式JavaScript框架，Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
vue3-组合式API
唯见青山不见君
11-20 838
vue3-组合式API
Vue3入门
weixin_49405038的博客
05-12 826
Vue3带来的新变化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积变小 更好的Typescript支持 Composition API （重点） 在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题 3. 破坏性语法更新 vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代） 过滤器filter
vue3基础+进阶（二、vue3常用组合式api基本使用）
qq_45796592的博客
07-23 1059
vue3 常用api的基本使用
vue3组合式api
weixin_47277125的博客
06-06 1188
组合式api
Vue3中的组合式API的详细教程和介绍
努力的鋜
12-01 238
VUE3中的组合式API的介绍和一些传值 一些使用方式
快速入门Vue
11-30
一、什么是Vue？ Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。 以上内容摘自http://cn.vuejs.org/v2/guide/，说实话
Vue3组合式api(奚奚).md
06-16
Vue3组合式api(奚奚)
Vue3组合式api.xmind
06-16
Vue3组合式api
Vue3组合式api(老田).md
06-16
Vue3组合式api(老田)
实现基于Vue3组合式API的登陆系统
04-07
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架，是一个构建数据驱动的 web 界面的库。在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。相较于传统的web开发，前端使用js开发，服务端还需要用其他语言来写。vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法。通过cmd命令框输入：node -v 可查看是否安装。
vue3 组合式使用示例及代码展示，vue3 入门参考书，vue3 烹饪书.zip
最新发布
04-03
vue3 组合式API、vuex、vue-router、axios、tailwindcss使用示例及代码展示，vue3 入门参考书，vue3 烹饪书.zip
Vue3-常用的Composition API（组合API）
qq_56973906的博客
09-18 1648
script setup> 语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在使用，并且不需要些export default{}这意味着与普通的 只在组件被首次引入的时候执行一次不同， 中的代码会在每次组件实例被创建的时候执行。setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。
vue3组合式Api
01-18
Vue 3的组合式API是一种新的API风格，它使开发者能够更好地组织和重用组件逻辑。下面是一个关于Vue 3组合式API的例子： ```vue 解构响应式对象数据 <p>Username: {{ username }} <p>Age: {{ age }} ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑的像个child

好人一生平安，先磕为敬

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值