vue3.0的setup()函数,vue3 setup函数
Scriptsetup是vue3的新语法糖，但不是新的功能模块。只是简化了过去组合API中“return”的编写方法，运行时性能更好。本文主要介绍Vue3.2中关于设置语法糖的相关信息，有需要的可以参考一下。
目录
上一页1。什么是设置语法糖2。与设置组件3自动注册。新API 3.1定义Props 3.2定义Emits 3.3定义Xposevue 3项目如何打开设置语法糖总结：
前文
作为前端程序员，说起Vue 3并不陌生。作为目前最火的前端框架之一，很多人把它作为入门框架。
不过，虽然Vue 3早就投入使用了，但还是会有人不可避免地抱怨Vue 3的知识点太多太复杂，更新太快。不是，最近Vue 3敲定了一项新技术：脚本设置语法糖。
1.什么是setup语法糖
首先，Vue3.0暴露的变量必须返回才能在模板中使用；
现在，只需在脚本标记中添加setup。组件不需要注册就可以引入，属性和方法不需要返回，也不需要写setup函数或者导出default。甚至自定义指令也可以在我们的模板中自动获得。
模板
my-component:num= num @ click= addNum /
/模板
脚本设置
从“vue”导入{ ref }；
从导入MyComponent。/MyComponent。vue ；
//像正常设置那样编写，但不需要返回任何变量
Const num=ref(0) //这里定义的num可以直接使用
const addNum=()={//函数也可以直接引用，不用返回。
数值
}
/脚本
//必须使用驼峰名。
2.使用setup组件自动注册
在脚本设置中，引入的组件可以直接使用，不需要通过组件注册，也不能指定当前组件的名称。它会自动以文件名为主，即不需要写name属性。示例：
模板
你好/你好
/模板
脚本设置
从导入ziHello。/ziHello
/脚本
3.使用setup后新增API
因为没有设置功能，怎么拿道具和发射？
Setup script语法sugar提供了一个新的API供我们使用。
3.1 defineProps
用于从父组件接收道具。示例：
父组件代码
模板
div class=die
H3我是父组件/h3
zi-hello :name=name/zi-hello
/div
/模板
脚本设置
从导入ziHello。/ziHello
从“vue”导入{ref}
Let=ref(赵小磊======)
/脚本
子组件代码
模板
差异
我是子组件{{name}} //赵小磊======
/div
/模板
脚本设置
从“vue”导入{defineProps}
defineProps({
名称：{
类型：字符串，
默认值：“我是默认值”
}
})
/脚本
3.2 defineEmits
子组件被传递给父组件事件。示例：
组件
模板
差异
我是子组件{{name}}
按钮@click=ziupdata 按钮/按钮
/div
/模板
脚本设置
从“vue”导入{ defineEmits }
//自定义函数，父组件可以触发
const em=defineEmits([updata])
const ziupdata=()={
Em(updata ，我是子组件的值)
}
/脚本
父组件
模板
div class=die
H3我是父组件/h3
zi-hello @ updata= updata /zi-hello
/div
/模板
脚本设置
从导入ziHello。/ziHello
const updata=(数据)={
console.log(数据)；//我是子组件的值
}
/脚本
3.3 defineExpose
组件公开它自己的属性，这些属性可以在父组件中获得。示例：
组件
模板
差异
我是一个子组件。
/div
/模板
脚本设置
从“vue”导入{defineExpose，reactive，ref}
设ziage=ref(18)
让ziname=reactive({
姓名：“赵小磊”
})
//公开的变量
defineExpose({
ziage，
ziname
})
/脚本
父组件
模板
div class=die
H3 @click=isclick 我是父组件/h3
zi-hello ref=zihello/zi-hello
/div
/模板
脚本设置
从导入ziHello。/ziHello
从“vue”导入{ref}
const zihello=ref()
const isclick=()={
Console.log(接收ref的泄漏值，zihello.value.ziage)
Console.log(接收reactive泄露的值，zihello.value.ziname.name)
}
/脚本
父组件获得的结果
vue3项目如何开启setup语法糖
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
1.首先关闭编辑器的vetur插件，打开Volar。
2.创建新的文件tsconfig.json/jsconfig.json,并在compilerOptions中添加“strict”:true和“module resolution”:“node”配置项。
总结：
那就是对设置语法糖的理解和认识。到目前为止，这篇关于Vue3.2中设置语法糖的文章已经介绍到这里了。关于Vue3.2中设置语法糖的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。