vue3组合式API中setup()概念和reactive()函数的用法
作者:初映CY的前说 发布时间:2024-05-22 10:42:13
??本文核心:setup()概念、 reactive()的使用
【前言】vue3作为vue2的升级版,有着很多的新特性,其中就包括了组合式API,也就是是 Composition API。学习组合式API有什么优点呢?之前的vue2中结构不是挺不错的吗?那么接下来的事件,我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式。
?一、组合式API对比vue2项目结构
在vue2当中
1.优点:易于学习和使用,写代码的位置已经约定好。
2.缺点:对于大型项目,不利于代码的复用、不利于管理和维护。
3.解释:同一功能的数据和业务逻辑分散在同一个文件的 N 个地方,随着业务复杂度的上升,我们需要经常在类似于data()以及methods中进行来回的处理
在vue3当中
1.优点:可以把同一功能的数据和业务逻辑组织到一起,方便复用和维护。
2.缺点:需要有良好的代码组织和拆分能力,相对没有 Vue2 容易上手。
3.解释:注意:为了能让大家较好的过渡到 Vue3.0 版本,目前也是支持 Vue2.x 选项 API 的写法。
?二、setup()函数的使用
2.1setup()函数的基础概念
Vue3 中的 setup() 是 Vue3 新增的组件配置项,用于替代 Vue2 中的 data()、methods()、computed() 等配置项。setup() 提供了更简洁的编写方式,且能够更好地利用 Vue3 提供的 Composition API。setup() 函数接受两个参数,分别是 props 和 context。其中,props 是组件接收的属性值,context 包含了一些组件的配置信息。
1.是什么:setup 是 Vue3 中新增的组件配置项,作为组合 API 的入口函数。
2.执行时机:实例创建前调用,甚至早于 Vue2 中的 beforeCreate。
3.注意点:由于执行 setup 的时候实例还没有 created,所以在 setup 中是不能直接使用 data 和 methods 中的数据的,所以 Vue3 setup 中的 this 也被绑定为了 undefined。
虽然 Vue2 中的 data 和 methods 配置项虽然在 Vue3 中也能使用,但不建议了,建议数据和方法都写在 setup 函数中,并通过 return 进行返回可在模版中直接使用(一般情况下 setup 不能为异步函数)。
2.2.setup()初体验
App.vue
<template>
<h1 @click="say()">{{ msg }}</h1>
</template>
<script>
export default {
setup() {
const msg = 'Hello Vue3'
const say = () => {
console.log(msg)
}
return { msg, say }
},
}
</script>
效果查看:
注意:酷似于vue2中的data()与methods都是需要写在return才可作为结果进行调用。
【小小面试题补充】setup 中 return 的一定只能是一个对象吗?(setup 也可以返回一个渲染函数)
App.vue
<script>
import { h } from 'vue'
export default {
name: 'App',
setup() {
return () => h('h2', 'Hello Vue3')
},
}
</script>
控制台则是打印出了h2标签的Hello Vue3。
2.3.reactive()函数
使用 reactive 函数包装数组为响应式数据。reactive 是一个函数,用来将普通对象/数组包装成响应式式数据使用,无法直接处理基本数据类型(因为它是基于 Proxy 的,而 Proxy 只能代理的是对象)。
比如当我有一个需求:点击删除当前行信息
App.vue
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
</ul>
</template>
<script>
export default {
name: 'App',
setup() {
const arr = ['a', 'b', 'c']
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem,
}
},
}
</script>
通过vueTools查看,我点击过后数据是被删除了,但页面上并没有事实的渲染出来
此时,使用 reactive()包装数组使变成响应式数据,别忘了导入
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const arr = reactive(['a', 'b', 'c'])
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem,
}
},
}
</script>
此刻页面也就具有了响应式,点击时删除,页面则是响应式的
同理:我们用reactive()来包裹我们的对象来使用
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<input type="submit" />
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
// 默认是递归监听的,对象里面任何一个数据的变化都是响应式的
state.arr.splice(index, 1)
}
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>
上述代码的解意:
我定义了输入框,定义了删除、添加事件的操作,通过v-model打到双向绑定数据来完成对我的数据进行增加与删除。
到目前你是不是对setup()的使用有了更加清晰的认识呢?下面再来简化一下我们的写法。
2.3.1reactive()的进一步抽离
优化:将同一功能的数据和业务逻辑抽离为一个函数,代码更易读,更容易复用。
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<input type="submit" />
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
function useRemoveItem() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
state.arr.splice(index, 1)
}
return { state, removeItem }
}
function useAddItem(state) {
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
user,
handleSubmit,
}
}
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, handleSubmit } = useAddItem(state)
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>
将方法抽离出来,用类似于导入的方式进行一个抽离,将数据与方法放在一起,便于我们的统一管理。
2.3.2reactive()再进行进一步文件拆分并且引入
App.vue
<template>
<form >
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<button type="submit" @click.prevent="submit">提交</button>
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import {useRemoveItem,handleSubmit} from './hooks'
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, submit } = handleSubmit(state)
return {
state,removeItem,user,submit
}
},
}
</script>
hooks/index.js
import { reactive } from 'vue'
export const useRemoveItem=()=> {
const state= reactive( {
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
]
})
const removeItem=(index)=>{
state.arr.splice(index,1)
console.log(state.arr);
}
return { state, removeItem }
}
export const handleSubmit=(state)=>{
const user = reactive({
id: '',
name: '',
})
console.log(1);
const submit = () => {
state.arr.push({
...user
})
user.id = ''
user.name = ''
}
return { user, submit }
}
来源:https://blog.csdn.net/m0_61118311/article/details/129845825
猜你喜欢
- class Node: def __init__(self,dataval=None): self.d
- 导语哈喽!大家好,我是木木子。今日游戏更新系列来啦,是不是很想知道今天的游戏是什么类型的?立马安排上——随着年纪的不断上升,我们开始丢三落四
- assert断言声明,遇到错误则立即返回在使用python语言开发深度学习模型时,经常会遇到模型运行结束时才会发现的崩溃状态,或者得到的结果
- 产品通常分两种,一种是遵循现有用户习惯,一种是颠覆用户习惯。至于什么是用户习惯,你现在用右手还是左手操作鼠标,这就是你的习惯。很多公司团队专
- 今天来分享一个“高大上”的技术——使用python编写一个可以用微信远程控制电脑的程序!先来分析一下控制的具体流程:我们使用微信给特定的邮箱
- 前言人类都是视觉动物,不管是男生还是女生看到漂亮的小姐姐、小哥哥就想截图保存下来。可是截图会对画质会产生损耗,截取的画面不规整,像素不高等问
- DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串。可用DATE_F
- 本文给大家介绍Python文件处理相关知识,具体内容如下所示:1.文件的常见操作文件是日常编程中常用的操作,通常用于存储数据或应用系统的参数
- 这篇文章主要介绍了python实现windows桌面截图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 1、确定服务器上的防火墙没有阻止 3306 端口 MySQL 默认的端口是 3306 ,需要确定防火墙没有阻止 3306 端口,否则远程是无
- openpyxlopenpyxl模块属于第三方模块,是一个在 python 中能够处理 excel 文件的模块,还有比较出名的是xlrd、x
- 第一步:换源输入命令换掉Ubuntu的下载源sudo nano /etc/apt/sources.list将以下全部替换掉原文件,我这里用的
- 一、张量定义张量:TensorFlow的张量是n维数组,类型为tf.Tensor。标量:一个数字 (0阶张量)向量:一维数组 (1阶张量)矩
- strIn 为 输入的Email地址字符串变量 返回为true或falsereturn Regex.IsMatch(strIn, @&quo
- 引言这篇文章介绍如何实现页面与 iframe 进行通信,实际工作中可能很难遇到,但一旦遇到了,我们要能够立即想到怎样去实现。iframe 向
- 这礼拜碰到一些问题,然后意识到基础知识一段时间没巩固的话,还是有遗忘的部分,还是需要温习,这里做份笔记,记录一下前续先简单描述下碰到的题目,
- python使用utf8编码,mysql也是utf8编码,是什么问题?后来查了一下,使用一个简单的办法即可:vsql = "ins
- 题目:CSV格式清洗与转换描述附件是一个CSV格式文件,提取数据进行如下格式转换:
- 前言:对于遍历大数组而言, for 循环能比 for range 循环更高效与稳定,这一点在数组元素为结构体类型更加明显。我们知道,Go 的
- 目前,各大搜索引擎如google、百度、雅虎已经对动态页面诸如asp,php有着不错的支持了,只要动态页面后面的参数不要太长,如控制在3个参