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

2023-11-23 01:20
文章标签 javascript 函数 vue 深入 解析 api frontend setup composition 灵活运用

本文主要是介绍灵活运用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.vue 和 ref 函数。在模板中，你展示了一些基本的提示性语句，并包含一个更新数据的按钮和子组件 child。
  • 你在 setup 函数中初始化了一个 msg 的响应式引用，并返回了这个引用，使其在模板中可用。
  • 子组件 child.vue 中，你使用 props 获取了父组件传递的值，并在 beforeCreate 和 setup 生命周期钩子中输出了一些信息。在模板中，你展示了父组件传递的消息。

接下来，让我帮你继续写下去：

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,};
},

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

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

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

1.3 setup 函数的参数

在之前的例子中，我们在 setup 函数中只使用了 setup()，但实际上，setup 函数可以接受两个参数：props 和 context（或者可以使用解构语法分别获取 attrs、slots 和 emit）。这两个参数提供了更多的灵活性和访问权限。

在 App.vue 中，我们可以修改 setup 函数，接受 props 和 context 参数：

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 函数中，我们可以使用诸如 reactive、ref、watch 等 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 创建了一个包含 name 和 version 的响应式对象 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 函数时，需要注意一些事项：

  • 不要混合使用 setup 和 data、methods 等选项。在 setup 中可以访问 props，但在 data 和 methods 中无法访问 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 提供了两个新的生命周期钩子函数：onBeforeMount 和 onBeforeUnmount。这两个钩子分别在组件挂载前和卸载前执行：

// 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 函数中，我们可以访问 props、context，使用 Composition API 的功能，处理插槽和自定义事件，以及执行一些生命周期钩子。这使得我们能够更好地组织和重用组件的代码。

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


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

相关文章

Golang HashMap实现原理解析

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,：本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构，它通过哈希函数将键映射到数组的索引位置，支持
阅读更多...
Python的time模块一些常用功能(各种与时间相关的函数)

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,：本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指
阅读更多...
Python正则表达式语法及re模块中的常用函数详解

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念： 本身也是一个字符串，其中
阅读更多...
Python使用getopt处理命令行参数示例解析(最佳实践)

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数？getopt模块基础实际应用示例与其他参数处理方式的比较常见问http
阅读更多...
Python利用ElementTree实现快速解析XML文件

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.
阅读更多...
Java的栈与队列实现代码解析

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组
阅读更多...
java解析jwt中的payload的用法

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》：本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1：添加依赖步骤 2：解析 JWT2. 使用 N
阅读更多...
Python中__init__方法使用的深度解析

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程（OOP）体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2