灵活运用Vue 3中的setup函数—深入解析Composition API

本文主要是介绍灵活运用Vue 3中的setup函数—深入解析Composition API,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

新建项目,项目主入口为App.vue(主组件),新建child.vue(子组件)。

image-20230319152907890

1.1 setup 执行 时机问题

1.在主组件里引入子组件和ref:

import {ref} from 'vue'
import child from './components/child.vue'

2.template层:写一些基本提示性语句

<template><h1>父组件</h1><h3>{{ msg }}</h3><button @click="msg +='你好'">更新数据</button><hr><child :msg="msg"/>
</template>

3.注册放行子组件:

neme: 'App',//注册components: {child},

4.写setup方法:

setup() {const msg = ref("11")return {msg,}
},

5.子组件如下:使用props获取到父组件的值,查看beforeCreate和setup的执行顺序。

export default {name:'child',props:['msg'],beforeCreate(){console.log("beforeCreate执行");},setup(){console.log("setup执行了");return}
}

6.子组件template

<template><h2>子组件</h2><h3>msg:{{ msg }}</h3>
</template>

1.1.1 总结

1.setup 中一般都是返回一个对象,对象中的属性和方法都可以在 html 模版中直接使用

2.setup 是在 before Create 生命周期回调之前就执行了, 而且就执行一次

3.由此可以推断出:setup 在执行的时候, 当前的组件还没有创建出来, 也就意味着:组件实例对象 this 根本就不能用

this 是 undefined, 说明, 就不能通过 this 再去调用 data/computed/methods 中的相关内容了

1.2 setup细节

  • setup执行的时机
    • 在beforeCreate之前执行(一次), 此时组件对象还没有创建
    • this是undefined, 不能通过this来访问data/computed/methods / props
    • 其实所有的composition API相关回调函数中也都不可以
  • setup的返回值
    • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
    • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
    • 返回对象中的方法会与methods中的方法合并成功组件对象的方法
    • 如果有重名, setup优先
    • 注意:
    • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
    • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
  • setup的参数
    • setup(props, context) / setup(props, {attrs, slots, emit})
    • props: 包含props配置声明且传入了的所有属性的对象
    • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
    • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
    • emit: 用来分发自定义事件的函数, 相当于 this.$emit
<template><h2>App</h2><p>msg: {{msg}}</p><button @click="fn('--')">更新</button><child :msg="msg" msg2="cba" @fn="fn"/>
</template><script lang="ts">
import {reactive,ref,
} from 'vue'
import child from './child.vue'export default {components: {child},setup () {const msg = ref('abc')function fn (content: string) {msg.value += content}return {msg,fn}}
}
</script>
<template><div><h3>{{n}}</h3><h3>{{m}}</h3><h3>msg: {{msg}}</h3><h3>msg2: {{$attrs.msg2}}</h3><slot name="xxx"></slot><button @click="update">更新</button></div>
</template><script lang="ts">import {ref,defineComponent
} from 'vue'export default defineComponent({name: 'child',props: ['msg'],emits: ['fn'], // 可选的, 声明了更利于程序员阅读, 且可以对分发的事件数据进行校验data () {console.log('data', this)return {// n: 1}},beforeCreate () {console.log('beforeCreate', this)},methods: {// update () {//   this.n++//   this.m++// }},// setup (props, context) {setup (props, {attrs, emit, slots}) {console.log('setup', this)console.log(props.msg, attrs.msg2, slots, emit)const m = ref(2)const n = ref(3)function update () {// console.log('--', this)// this.n += 2 // this.m += 2m.value += 2n.value += 2// 分发自定义事件emit('fn', '++')}return {m,n,update,}},
})
</script>

这是一个关于Vue 3的组件开发和setup函数使用的示例。我看到你提供了一个父组件 App.vue 和一个子组件 child.vue 的代码,以及关于setup函数的一些细节和总结。

首先,让我简要概括一下你的代码:

  • 在主组件 App.vue 中,你引入了子组件 child.vueref 函数。在模板中,你展示了一些基本的提示性语句,并包含一个更新数据的按钮和子组件 child
  • 你在 setup 函数中初始化了一个 msg 的响应式引用,并返回了这个引用,使其在模板中可用。
  • 子组件 child.vue 中,你使用 props 获取了父组件传递的值,并在 beforeCreatesetup 生命周期钩子中输出了一些信息。在模板中,你展示了父组件传递的消息。

接下来,让我帮你继续写下去:

setup函数的更多用法

setup函数中,可以执行各种初始化逻辑,包括对props的处理、引入其他模块、设置定时器等。

// 在 App.vue 的 setup 函数中
import { onMounted, onUnmounted } from 'vue';setup() {const msg = ref("1");// 添加一个计时器,每秒更新一次数据const timer = setInterval(() => {msg.value += '!';}, 1000);// 在组件挂载时启动计时器onMounted(() => {console.log('组件挂载了!');});// 在组件卸载时清除计时器onUnmounted(() => {clearInterval(timer);console.log('组件卸载了!');});return {msg,};
},

引入了onMountedonUnmounted函数,它们分别在组件挂载和卸载时执行。在挂载时,启动了一个计时器,每秒更新一次数据;在卸载时清除了计时器。

这样, App.vue 组件现在会在挂载时启动一个定时器,在卸载时清除定时器。

当然,继续讨论 Vue 3 中 setup 函数的更多用法和细节。

1.3 setup 函数的参数

在之前的例子中,我们在 setup 函数中只使用了 setup(),但实际上,setup 函数可以接受两个参数:propscontext(或者可以使用解构语法分别获取 attrsslotsemit)。这两个参数提供了更多的灵活性和访问权限。

App.vue 中,我们可以修改 setup 函数,接受 propscontext 参数:

setup(props, context) {const msg = ref("111");// 访问 propsconsole.log(props.msg);// 访问 context,包含 attrs、slots 和 emitconsole.log(context.attrs.msg2);console.log(context.slots);console.log(context.emit);return {msg,};
},

这样,我们就可以更灵活地处理传递给组件的属性以及与组件的上下文进行交互。

1.4 使用 Composition API

setup 函数是 Composition API 的一部分,它使得组件逻辑可以更灵活地组织和重用。在 setup 函数中,我们可以使用诸如 reactiverefwatch 等 Composition API 提供的功能。

setup() {const msg = ref("11");const count = ref(0);// 使用 watch 监听数据变化watch(() => msg.value, (newVal, oldVal) => {console.log(`消息从 ${oldVal} 更新为 ${newVal}`);});// 使用 reactive 创建响应式对象const state = reactive({name: "Vue 3",version: "3.0.0",});return {msg,count,state,};
},

这个例子中,我们使用了 watch 监听 msg 的变化,并使用 reactive 创建了一个包含 nameversion 的响应式对象 state

1.5 组合式函数的提取和重用

由于 setup 函数的灵活性,我们可以将一些逻辑提取为组合式函数,以便在多个组件中重用。例如,我们可以创建一个处理数据的函数:

// utilities.js
import { ref } from 'vue';export function useData(initialValue) {const data = ref(initialValue);function updateData() {data.value += '!';}return {data,updateData,};
}

然后在 setup 函数中使用:

// App.vue
import { useData } from './utilities.js';setup() {const { data: msg, updateData } = useData("111");return {msg,updateData,};
},

这样,我们可以更好地组织和重用代码。

1.6 注意事项

在使用 setup 函数时,需要注意一些事项:

  • 不要混合使用 setupdatamethods 等选项。在 setup 中可以访问 props,但在 datamethods 中无法访问 setup 中的属性和方法。
  • setup 函数不能是异步的,因为返回值将不再是一个对象,而是一个 Promise

1.7 插槽(Slots)和自定义事件

在 Vue 3 中,使用 setup 函数也能够更方便地处理插槽和自定义事件。在 child.vue 组件中,我们已经看到了如何使用插槽和自定义事件:

// child.vue
setup(props, { attrs, emit, slots }) {const m = ref(2);const n = ref(3);function update() {m.value += 2;n.value += 2;// 分发自定义事件emit('fn', '++');}return {m,n,update,};
},

在这个例子中,我们使用 emit 函数来分发自定义事件,父组件 App.vue 可以监听这个事件并执行相应的逻辑。

1.8 生命周期钩子

setup 函数中,Vue 3 提供了两个新的生命周期钩子函数:onBeforeMountonBeforeUnmount。这两个钩子分别在组件挂载前和卸载前执行:

// App.vue
setup() {const msg = ref("11");onBeforeMount(() => {console.log('组件即将挂载!');});onBeforeUnmount(() => {console.log('组件即将卸载!');});return {msg,};
},

这样,我们可以在组件生命周期的不同阶段执行特定的逻辑。

1.9 组件引入和注册

App.vue 中,我们使用 import 语句引入了 child.vue 组件,并使用 components 选项注册了这个组件:

// App.vue
import child from './components/child.vue';export default {components: {child,},// ...
};

这样,我们就可以在模板中直接使用这个组件。

1.10 总结

通过这个例子,我们更深入地了解了 Vue 3 中 setup 函数的使用方式和一些注意事项。Composition API 提供了更灵活和可复用的代码组织方式,让我们能够更好地处理组件的逻辑。

setup 函数中,我们可以访问 propscontext,使用 Composition API 的功能,处理插槽和自定义事件,以及执行一些生命周期钩子。这使得我们能够更好地组织和重用组件的代码。

这篇关于灵活运用Vue 3中的setup函数—深入解析Composition API的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/414311

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

MySQL数据库函数之JSON_EXTRACT示例代码

《MySQL数据库函数之JSON_EXTRACT示例代码》:本文主要介绍MySQL数据库函数之JSON_EXTRACT的相关资料,JSON_EXTRACT()函数用于从JSON文档中提取值,支持对... 目录前言基本语法路径表达式示例示例 1: 提取简单值示例 2: 提取嵌套值示例 3: 提取数组中的值注意