【Vue3】vue3中组合式Api的setup写法快速入门上手起步

最新推荐文章于 2025-03-13 13:13:12 发布
最新推荐文章于 2025-03-13 13:13:12 发布
阅读量3.5k 收藏 24
点赞数 3
分类专栏： vue 文章标签： vue.js 前端 javascript vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42960907/article/details/126152609
版权

要使用Vue3，那必须得会setup，因为setup是组合式API表演的舞台。

安装volar

如果你的VScode之前安装有vuter插件，请先把他禁用或者卸载掉，然后安装volar。
因为，vuter插件是针对Vue2的，而Vue3的写法跟Vue3是有区别的，特别是使用setup语法糖之后，所以写代码的时候可能会有报错。
volar插件则是针对Vue3的。安装之后就不报错，而且有提示出来。而且点击右上角的小图标，还可以将html代码、js代码和css代码做分开展示。

一、Vue3中变量和方法

1.1 之前的用法

通过这个例子，我们可以知道，Vue3中HTML模板不再需要一个根标签了，数据也不用在data中定义，方法也不需要在methods中定义。而且，模板中需要的数据、方法必须在setup中返回(return)。

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击了 {{ count }} 次了</button>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0)
    const increment = () => {
      count.value ++
    }
    /*不使用script-srtup语法糖需要导出需要在template使用的变量和方法*/
    return {
      count,
      increment
    }
  }
}
</script>

1.2 现在的用法(setup语法糖)

在<script setup>中，需要在script标签加上setup属性，就不再需要写setup函数，而且模板中用到的变量和方法不需要返回(return)。使用setup语法糖后变量和方法已不再需要return出去才能被template使用了，减少了代码量，看起来更加的美观。

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
</template>

<script setup>
	import { ref } from 'vue'
	
	let count = ref(0)
	const increment = () => {
		count.value ++
	}
</script>

二、Vue3中使用组件

2.1之前的用法

// App.vue
<template>
  <demo />
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: { Demo }
}
</script>

2.2现在的用法(setup语法糖)

在<script setup>中，只需要在引入组件即可在模板中使用，不再需要自己去注册组件。

// App.vue

<template>
  <demo />
</template>

<script setup>
import Demo from './components/Demo.vue'
</script>

三、Vue3中父传子接收Props --> defineProps()

3.1之前的用法

传递数据给组件，传递的方式不变，接收时，需要在props中定义接收。setup函数被调用接收到的以第一个参数就是props。

// App.vue
<template>
  <demo msg="hi Demo, I'm your father!"/>
</template>

<script setup>
import Demo from './components/Demo.vue'
</script>

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
  <h3>{{msg}}</h3>
</template>

<script>
	import { ref } from 'vue'
	export default {
		props: {
			msg: {
				type: String
			}
		},
		setup(props) {
			let count = ref(0)
			const increment = () => {
				count.value ++
			}
			return {
				count,
				increment
			}
		}
	}
</script>

3.2现在的用法(setup语法糖)

在<script setup>中，我们没有机会写setup函数，就接收不到他调用时传递的参数。所以有一个新的APIdefineProps它是一个函数。defineProps会返回一个对象，其中包含了可以传递给组件的所有 props。

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
  <h3>{{msg}}</h3>
</template>

<script setup>
	import { ref, defineProps } from 'vue'
	const props = defineProps(['msg'])
	let count = ref(0)
	const increment = () => {
		count.value ++
	}
</script>

四、Vue3中子传父emit自定义事件 --> defineEmits()

4.1之前的用法

子组件射出自定义事件给父组件，则需要通过emits定义好要传递的事件，setup函数中的第二个参数就是上下文对象centext(这里我们不详细介绍了)，然后通过这个对象去调用emit方法就可以射出自定义事件了。

// components/Demo.vue
<template>
	<h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
	<h3>{{msg}}</h3>
</template>

<script>
	import { ref } from 'vue'

	export default {
		props: {
			msg: {
				type: String
			}
		},
		emits: ['hanlde-count'],
		setup(props, centext) {
			let count = ref(0)

			const increment = () => {
				count.value ++
				centext.emit('hanlde-count', count.value)
			}

			console.log(props.msg)

			return {
				count,
				increment
			}
		}
	}	
</script>

// App.vue
<template>
  <demo
    msg="hi Demo, I'm your father!"
    @hanlde-count="hanldeCount"
  />
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: { Demo },
  setup() {
    const hanldeCount = count => {
      console.log(count)
    }
    return{
      hanldeCount
    }
  }
}
</script>

4.2现在的用法(setup语法糖)

在<script setup>中，子组件想要射出自定义事件时，则需要通过defineEmits来定义自定义事件。

// components/Demo.vue

<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击{{ count }} 次了</button>
  <h3>{{msg}}</h3>
</template>

<script setup>

	import { ref, defineProps, defineEmits } from 'vue'

	const props = defineProps(['msg'])
	const emit = defineEmits(['hanlde-count'])

	console.log(props.msg)

	let count = ref(0)

	const increment = () => {
		count.value ++
		emit('hanlde-count', count.value)
	}
	
</script>

五、Vue3中父组件获取组件的数据或方法 --> defineExpose()

5.1之前的用法

在子组件中，暴露组件变量或者方法时，不用做其他操作，只需要确保setup函数中return该变量或方法。因为在script标签中所有代码都使用expost default暴露了。而在父组件中需要通过给子组件添加ref属性，然后在onMounted生命周期函数中获取子组件的dom即可获得子组件的变量和方法。

注意：获取dom是，一定在onMounted声明周期获取，因为页面没有渲染，就获取不要dom

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
  <h3>{{msg}}</h3>
</template>

<script>
	import { ref } from 'vue'

	export default {
		props: ['msg'],
		emits: ['hanlde-count'],

		setup(props, context) {
			let count = ref(0)
			const name = ref('vernin')
		
			const increment = () => {
				count.value ++
				context.emit('hanlde-count', count.value)
			}

			return {
				count,
				increment,
				name
			}
		}
	}
</script>

// App.vue
<template>
  <demo
    ref="demo"
    msg="hi Demo, I'm your father!"
    @hanlde-count="hanldeCount"
  />
</template>

<script>
  import Demo from './components/Demo.vue'
  import { ref, onMounted } from 'vue'

  export default {
    components: { Demo },
    setup() {
      const demo = ref(null) // 记得把 demo return 出去
      
      // 错误写法：setup 函数无法获取dom -- setup相对于vue2的created钩子
      // console.log(demo.value.name) // 报错 
      // console.log(demo.value.count) // 报错

      // 正确写法：
      onMounted(() => {
        console.log('子组件Demo的count：', demo.value.count)
        console.log('子组件Demo的name：', demo.value.name)
      })
      const hanldeCount = count => {
        console.log(count)
      }
      
      return {
        demo,
        hanldeCount
      }
    }
  }
</script>

5.2现在的用法(setup语法糖)

在<script setup>中，没有写export default暴露，为了在组件中明确要暴露出去的变量或方法，需要使用defineExpose来变量，在父组件中，也是通过给子组件ref属性获取。

// components/Demo.vue
<template>
  <h2>Vue3.2中setup语法糖的使用</h2>
  <button @click="increment">点击 {{ count }} 次了</button>
  <h3>{{msg}}</h3>
</template>

<script setup>
	import { ref, defineProps, defineEmits, defineExpose } from 'vue'

	const props = defineProps(['msg'])
	const emit = defineEmits(['hanlde-count'])

	let count = ref(0)

	const increment = () => {
		count.value ++
		emit('hanlde-count', count.value)
	}

	const name = ref('vernin')
	defineExpose({
		name,
		count
	})
</script>

// App.vue
<template>
  <demo
    ref="demo"
    msg="hi Demo, I'm your father!"
    @hanlde-count="hanldeCount"
  />
</template>

<script setup>
  import Demo from './components/Demo.vue'
  
  import { ref, onMounted } from 'vue'
  const demo = ref(null)
  
  onMounted(() => {
    console.log('子组件Demo的count：', demo.value.count)
    console.log('子组件Demo的name：',demo.value.name)
  })
  
  const hanldeCount = count => {
    console.log(count)
  }

</script>

总结

使用setup语法糖和setup函数对比，我们不难看出，使用语法糖是，代码整洁了好多，不会有那么多的对象嵌套。也不用做什么额外的return，代码也简化了不少。

Vue3【组合式API（响应式、计算属性、事件处理、侦听器 、生命周期、模板引用、Props 、事件 ）自定义指令（基础 、全局与局部 、钩子函数参数）】(六)-全面详解（学习总结---从入门到深化）
03-27 713
Vue3【组合式API（响应式、计算属性、事件处理、侦听器 、生命周期、模板引用、Props 、事件 ）自定义指令（基础 、全局与局部 、钩子函数参数）】(六)-全面详解（学习总结---从入门到深化）
Vue3框架：一套武功秘籍即可上手 Vue3 项目开发需求：setup（原生 + 语法糖） && Vue3组合式 API 新特性 + Pinia状态管理工具 && Pinia持久化本地存储
Forever_Hopeful的博客
04-13 272
Vue3框架：一套武功秘籍即可上手 Vue3 项目开发需求：setup（原生 + 语法糖） && Vue3组合式 API 新特性 + Pinia状态管理工具 && Pinia持久化本地存储
Vue3【七】setup的语法糖setup简写方法
Ggome的博客
06-07 494
Vue3【七】setup的语法糖setup简写方法使用script标签式写法称为setup语法糖组件名称默认位文件名export 的内容可以省略。
vue3 setup写法（语法糖版本）
weixin_44064067的博客
08-12 9238
vue3 setup
【HTML页面使用vue3+setup语法】
最新发布
weixin_54366356的博客
03-13 718
直接在HTML页面中使用vue3+setup的语法代码，需要引入一些在线js库，废话不多说，直接上代码
vue3 setup语法糖的三种书写方法
interest_ing_的博客
01-09 4388
这篇文章主要介绍了vue3.0中setup使用，本文通过三种写法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。
vue3 setup语法糖写法基本教程
qq_57404736的博客
12-16 2266
基于vue3官网写的一篇基础教程，省略了一些不太重要的内容，添加了一些自己的见解。
1.2 Vue3核心语法之【setup】
m0_73814612的博客
05-13 917
setup是Vue3中一个新的配置项，值是一个函数，它是，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。
学好setup语法糖，快速上手Vue3
weixin_71732962的博客
04-26 1554
学好setup语法糖，快速上手Vue3
vue3快速上手指南
weixin_43943583的博客
07-15 2351
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台_，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。<template>
Vue3快速上手
萧曳丶
06-15 911
VUE3快速上手
vue3中的setup()函数详解
热门推荐
唯见青山不见君
11-29 1万+
vue3中的setup()函数详解
Vue3 setup 写法
hello_yzq的博客
03-21 284
需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。
VUE3学习笔记——setup
weixin_45392204的博客
04-15 3823
vue3中data、methods、computed、watch写法
vue3中的setup方法
jieyucx的博客
07-05 784
template > < h2 > 姓名： {name } } < / h2 > < h2 > 年龄： {age } } < / h2 > < button @click = "sayHello" > 说话 < / button > < / template > < script > export default {name : 'App' , //此处只是测试一下setup，暂时不考虑响应式的问题。setup() {
vue3语法糖详解（setup()、＜script setup＞）
夜空孤狼啸的博客
07-17 6510
vue3语法详解（setup()、＜script setup＞）
Vue3组合式API之Setup
qq_38836435的博客
08-03 739
组合式API诞生背景 使用过vue2.x开发过项目的人应该都清楚了其弊端，当一个组件功能较多的时候尤为明显。2.x版本的vue对于刚接触这个框架的人十分友好，简明的结构和易懂的使用方法很快就能上手。但是问题来了，当一个组件功能很多，每个功能的数据、方法以及生命钩子函数等等堆在了一起，当我们想去看某个功能的逻辑过程时，是极其繁琐的，你需要不断地上下查找编辑器的有关代码。 Setup 为了解决上面那个弊端，vue3提出了组合式api，简单地说就是把一个功能逻辑涉及到的数据、方法、生命周期、侦听器等等都收集在一起
Vue3组合api-setup
Mr_krab的博客
03-16 764
目录 (01)setup组合api的特点： （2）setup ref值类型 响应对象 (03)reactive 引用类型 响应式 (04)watchEffect监听效果 (05)生命周期 (06)全局配置 (07)getCurrentlnstance (08)computed 属性 (01)setup组合api的特点： 更加直观，接近原生js 按需加载 没有this，降低了耦合性，提高复用性 （2）setup setup 函数也是 Compsi...
vue3 组合式 API：setup()
咸鱼滚滚
08-17 1279
setup() 函数是在组件实例创建之前执行的，它用于组合组件的逻辑，包括响应式数据、方法、计算属性、监听等。它接收两个参数：props 和 context，并返回一个对象，其中包含可以在组件模板中使用的属性和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

卸载引擎

如果对您有帮助，请赏个饭吃

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

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

打赏作者

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

抵扣说明：

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

余额充值