vue3 setup函数,vue3中的setup
在vue3版本中，引入了一个新的函数，叫做设置。本文将通过实例为大家详细讲讲Vue3.2中设置语法糖的使用，感兴趣的小伙伴可以了解一下
目录
前言一、如何使用设置语法糖二、数据数据的使用三、方法方法的使用四、手表效果的使用五、观看的使用六、计算计算属性的使用七、道具父子传值的使用八、散发子父传值的使用九、获取子组件裁判员变量和定义展示暴露十、路由用户路由和用户外部的使用十一、商店仓库的使用十二、等待的支持十三、提供和注射祖孙传值
前言
提示：Vue3.2版本开始才能使用语法糖！在Vue3.0中变量必须返回出来，模板中才能使用；而在Vue3.2中只需要在脚本标签上加上设置属性，无需返回，模板便可直接使用，非常的香啊！
提示：以下是本篇文章正文内容，下面案例可供参考
一、如何使用setup语法糖
只需在脚本标签上写上设置
代码如下（示例):
模板
/模板
脚本设置
/脚本
样式范围语言=少
/风格
二、data数据的使用
由于设置不需写返回，所以直接声明数据即可
代码如下（示例):
脚本设置
导入{
裁判，
反应性，
斗牛士，
}来自“vue”
常数数据=反应({
patternVisible: false，
debugVisible: false，
aboutExeVisible: false，
})
const content=ref(内容)
//使用托雷夫斯解构
const { patternVisible，debugVisible，aboutExeVisible }=toRefs(data)
/脚本
三、method方法的使用
代码如下（示例):
模板
button @click=onClickHelp 系统帮助/按钮
/模板
脚本设置
从“vue”导入{反应性}
常数数据=反应({
aboutExeVisible: false，
})
//点击帮助
const onClickHelp=()={
控制台。日志(` o系统帮助`)
data.aboutExeVisible=true
}
/脚本
四、watchEffect的使用
代码如下（示例):
脚本设置
导入{
裁判，
观看效果，
}来自“vue”
让sum=ref(0)
watchEffect(()={
常数x1=总和值
console.log(watchEffect所指定的回调执行了)
})
/脚本
五、watch的使用
代码如下（示例):
脚本设置
导入{
反应性，
看着，
}来自“vue”
//数据
让sum=ref(0)
让msg=ref(你好啊)
让人=被动({
名称：张三，
年龄：18,
工作：{
j1:{
工资：20英镑
}
}
})
//两种监听格式
手表([sum，msg]，(newValue，oldValue)={
console.log(sum或味精变了，新值，旧值)
}，{immediate:true})
watch(()=person.job，(newValue，oldValue)={
console.log(person的工作变化了，新值，旧值)
}，{deep:true})
/脚本
六、computed计算属性的使用
计算计算属性有两种写法（简写和考虑读写的完整写法)
代码如下（示例):
脚本设置
导入{
反应性，
计算，
}来自“vue”
//数据
让人=被动({
名字：小，
姓氏：叮当
})
//计算属性简写
person.fullName=computed(()={
返回人。名-人。姓
})
//完整写法
person.fullName=computed({
get(){
返回人。名-人。姓
},
设置（值){
const nameArr=value.split(-)
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
/脚本
七、props父子传值的使用
子组件代码如下（示例):
模板
span{{props.name}}/span
/模板
脚本设置
从“vue”导入{ defineProps }
//声明小道具
const props=defineProps({
名称：{
类型：字符串，
默认值："11"
}
})
//或者
//const props=define props([ name ])
/脚本
父组件代码如下（示例):
模板
child :name=name/
/模板
脚本设置
从“vue”导入{ref}
//引入子组件
从导入子级 child.vue
let name=ref(小叮当)
/脚本
八、emit子父传值的使用
子组件代码如下（示例):
模板
a-button @click=isOk
确定
/a按钮
/模板
脚本设置
从“vue”导入{定义发出}；
//发出
const emit=define发出([ aboutExeVisible ])
/**
* 方法
*/
//点击确定按钮
const isOk=()={
emit( aboutExeVisible )；
}
/脚本
父组件代码如下（示例):
模板
adout exe @ aboutExeVisible= aboutExeHandleCancel /
/模板
脚本设置
从“vue”导入{反应性}
//导入子组件
从导入AdoutExe./components/AdoutExeCom
常数数据=反应({
aboutExeVisible: false，
})
//内容组件裁判员
//关于系统隐藏
const aboutExeHandleCancel=()={
data.aboutExeVisible=false
}
/脚本
九、获取子组件ref变量和defineExpose暴露
即vue2中的获取子组件的裁判，直接在父组件中控制子组件方法和变量的方法
子组件代码如下（示例):
模板
p{{data }}/p
/模板
脚本设置
导入{
反应性，
托雷夫斯
}来自“vue”
/**
* 数据部分
* */
常数数据=反应({
模型可见：假
历史可视：假，
reportVisible: false，
})
defineExpose({
.toRefs(数据),
})
/脚本
父组件代码如下（示例):
模板
button @click=onClickSetUp 点击/按钮
Content ref=content /
/模板
脚本设置
从“vue”导入{ref}
//内容组件裁判员
const content=ref(内容)
//点击设置
const onClickSetUp=({ key })={
内容。价值。模型可见=真
}
/脚本
样式范围语言=少
/风格
十、路由useRoute和useRouter的使用
代码如下（示例):
脚本设置
从“vue路由器"导入{ useRoute，useRouter }
//声明
const route=useRoute()
const router=useRouter()
//获取询问
console.log(route.query)
//获取参数
console.log(route.params)
//路由跳转
router.push({
路径：`/index
})
/脚本
十一、store仓库的使用
代码如下（示例):
脚本设置
从" vuex "导入{ useStore }
从导入{ num }个./存储/索引
const store=useStore(数字)
//获取状态管理的状态
控制台。日志(商店.州.号码)
//获取状态管理的吸气剂
控制台。日志(存储。状态。获取号码)
//提交突变
store.commit(fnName )
//分发行动的方法
store.dispatch(fnName )
/脚本
十二、await 的支持
设置语法糖中可直接使用等待，不需要写异步，设置会自动变成异步设置
代码如下（示例):
脚本设置
导入美国石油学会(American Petroleum Institute)自./api/Api
const data=await Api.getData()
console.log(数据)
/脚本
十三、provide 和 inject 祖孙传值
父组件代码如下（示例):
模板
AdoutExe /
/模板
脚本设置
从“vue”导入{参考，提供}
从" @/components/AdoutExeCom "导入AdoutExe
let name=ref(Jerry )
//使用提供
提供( provideState ，{
姓名，
changeName: ()={
name.value=小叮当
}
})
/脚本
子组件代码如下（示例):
脚本设置
从“vue”导入{注入}
const provideState=inject( provideState )
provideState.changeName()
/脚本
以上就是一文搞懂Vue3.2中设置语法糖使用的详细内容，更多关于某视频剪辑软件设置语法糖的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。