Vue3 组合式 API(setup + script setup)实战
作者:互联网
2026-03-08
前言
Vue3 的 是官方推荐写法,代码更简洁、逻辑更聚合。本文带你真正用好组合式 API。
一、script setup 基本写法
<script setup>
// 直接写逻辑,无需 export default
import { ref, reactive, computed } from 'vue'
const msg = ref('Hello Vue3')
script>
<template>
<div>{{ msg }}div>
template>
二、响应式数据
-
ref:基础类型(string/number/boolean) -
reactive:对象 / 数组const num = ref(0) const user = reactive({ name: '张三', age: 20 })
三、计算属性 computed
import { computed } from 'vue'
const doubleNum = computed(() => num.value * 2)
四、方法与事件
<button @click="add">+1button>
<script setup>
const add = () => {
num.value++
}
script>
五、生命周期
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件挂载')
})
六、父传子 props
// 子组件
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
title: String
})
script>
七、子传父 emit
// 子组件
const emit = defineEmits(['change'])
const handleChange = () => {
emit('change', '新数据')
}
八、获取 DOM:ref
<div ref="box">div>
<script setup>
import { ref } from 'vue'
const box = ref(null)
onMounted(() => {
console.log(box.value)
})
script>
总结
优点:
- 代码更少
- 无需 return
- 更好的 TS 支持
- 逻辑更清晰
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
最新版vue3+TypeScript开发入门到实战教程之路由详解二
03/28
src-components调用链与即时聊天组件树
03/28
从0开始设计一个树和扁平数组的双向同步方案
03/28
拒绝 rem 计算!Vue3 大屏适配,我用 vfit 一行代码搞定
03/28
Home双router-view与布局切换逻辑
03/28
uniapp uview-plus 自定义动态验证
03/28
Vue3 单元测试实战:从组合式函数到组件
03/28
VUE-组件命名与注册机制
03/28
VTJ.PRO 在线应用开发平台概览
03/28
v0.dev 支持 RSC 了!AI 生成全栈组件离我们还有多远?
03/28
AI精选
