vue3中的setup,vue3.0的setup()函数
本文主要介绍Vue3编程流畅技巧，并讲解利用setup语法sugar拒绝写回车的方法。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
Vue3.2设置语法糖1 .脚本设置引入模板/用法时会自动注册2 .3.组件通信：定义Props而不是propsdefineEmit而不是emit4。脚本设置需要主动向父组件公开子组件属性：defineExpose5。语法糖其他功能。在设置中访问路线。
Vue3.2 setup语法糖
Vue3.2安装语法糖[单个文件组件脚本安装的语法糖]
如果你对Vue3语法糖有所了解，不如和我的另一篇文章一起吃！Vue3必须学习技能-定制钩子-让编写Vue3更愉快
本来默认情况下，你已经对Vue3.0的composition API有所了解，但是你被setup函数中需要繁琐的变量和与return相关的函数所困扰，所以你会从setup的语法糖脚本设置中有所收获。sugar脚本设置的引入，让你写Vue3更爽，让Vue3更丰满。这篇文章是根据官方文件写的。有时间的话，建议去官方文件里看看。这篇文章更有语义，更通俗。我希望你会喜欢它。
脚本设置是一个编译时语法糖，它在单个文件组件(SFC)中使用复合API。
为了解决Vue3.0中的setup需要繁琐的通过return公开声明的变量、函数和导入内容才能在template/中使用的问题。
1.script setup在template/使用
脚本设置可以在模板中使用/不使用由return声明的变量和函数以及由import引入的内容。
脚本设置语法糖
脚本设置
//导入引入的内容
从导入{ getToday }。/utils
//变量
const msg=你好！
//函数
函数日志(){
console.log(消息)
}
/脚本
//在模板中直接使用声明的变量、函数和import引入的内容
模板
div @ click= log“{ msg } }/div
p{{getToday()}}/p
/模板
标准组件脚本需要编写设置函数，重新运行起来很麻烦。
脚本
//导入引入的内容
从导入{ getToday }。/utils
导出默认值{
setup(){
//变量
const msg=你好！
//函数
函数日志(){
console.log(消息)
}
//如果要在tempate中使用它，需要在setup中公开返回
返回{
味精，
日志，
今天到了
}
}
}
/脚本
模板
div @ click= log“{ msg } }/div
p{{getToday()}}/p
/模板
总结：脚本设置语法sugar中的代码会编译成组件setup()函数的内容，可以在template/中使用，不需要通过return暴露声明的变量、函数和导入的内容，也不需要写export default{}
脚本设置语法sugar中的代码将被编译成组件setup()函数的内容。这意味着，与首次引入组件时只执行一次的通用脚本不同，脚本设置中的代码将从010到59000。
脚本
console.log(脚本)；//多次实例化组件，只触发一次。
导出默认值{
setup() {
console . log( setupFn )；//每次组件被实例化时，都会触发与script-setup标记相同的事件。
}
}
/脚本
(script-setup标记最终将被编译到setup()函数的内容中。每实例化一个组件，设置函数就实例化一次。脚本标签中的setup函数也是如此。每次实例化一个组件，就实例化了一次设置函数。但是脚本标签设置需要写在导出默认{}，另一个只在第一次导入的时候执行一次。)
2、script setup引入组件将自动注册
不需要通过组件注册组件：{}介绍完之后，就可以直接使用了。
lt；脚本安装gt。
从导入MyComponent。/MyComponent.vue
//组件：{MyComponent}无需注册即可直接使用。
lt；/scriptgt。
lt；模板gt。
nbsplt；MyComponent /gt。
lt；/templategt。
3、组件通信：
在脚本设置中，必须使用defineProps和define emissions API来代替Props和emissions。
DefineProps和defineEmits有完整的类型推断，在脚本设置上是每次组件实例被创建的时候执行(浏览掘金后发现大部分文章demo还是通过import引入这两个API，官方文档里写的很清楚)
defineProps 代替props
接收父组件传递的数据(父组件将参数传递给子组件)
父组件：
模板
父分区组件/分区
Child :title=msg /
/模板
脚本设置
从“vue”导入{ref}
从导入子级。/child.vue
Const msg=ref(父代值)//自动返回，直接在模板中使用。
/脚本
子组件：
父组件传递的道具可以直接用在template/(props。可以省略)
脚本设置需要通过props.xx获得父组件传递的props
模板
div /div的子组件
div的父组件传递的值：{{title}}/div
/模板
脚本设置
//不需要引入从“vue”导入{defineProps}。
//语法糖一定要用defineProps而不是Props。
const props=defineProps({
标题：{
类型：字符串
}
});
//script-setup需要通过props.xx获取父组件传递的道具
Console.log(props.title) //父级的值
/脚本
defineEmit 代替emit
子组件向父组件传输数据(子组件向外部公开数据)
子组件代码：
模板
div /div的子组件
Button @click=toEmits 子组件公开数据/button
/模板
脚本设置
从“vue”导入{ref}
Const name=ref(我是子组件)
//1.公开内部数据
const emisses=define emits([ child fn ])；
const toEmits=()={
//2.触发父组件中公开的childFn方法并携带数据。
发出( childFn ，name)
}
/脚本
父组件代码：
模板
父分区组件/分区
Child @childFn=childFn /
子组件传递的前数据{ { childdata } }
/模板
脚本设置
从“vue”导入{ref}
从导入子级。/child.vue
const childData=ref(null)
const childFn=(e)={
Consloe.log(子组件触发了父组件childFn并传递了参数e )
子数据=e .值
}
/脚本
4.script setup需主动向父组件暴露子组件属性 ：defineExpose
对于使用脚本设置的组件，父组件无法通过ref或$parent获取子组件的ref等响应数据，需要通过defineExpose主动公开。
子组件代码：
脚本设置
从“vue”导入{ ref }
常数a=1
常数b=ref(2)
//主动公开组件属性
defineExpose({
一，
b
})
/脚本
父组件代码：
模板
父分区组件/分区
Child ref=childRef /
Button @click=getChildData 通过ref /button获取子组件的属性
/模板
脚本设置
从“vue”导入{ref}
从导入子级。/child.vue
const children=ref()//注册响应数据
const getChildData=()={
//子组件接收公开的值
console . log(child ref . value . a)//1
console . log(children . value . b)//2响应数据
}
/脚本
5.语法糖其他功能
UseSlots和useAttrs (直接可用的，由于大多数人都是在SFC模式下开发，所以可以在template/through slots/tag中渲染插槽)
如果你需要在脚本设置中使用插槽和属性，你需要使用插槽和属性。
需要导入{useslots，useattrs}表单“vue”。
通过模板中的$slots和$attrs访问更方便/(attrs用于获取父组件中传递给子组件的非props的参数/方法，attrs用于获取父组件中传递给子组件的非props的参数/方法，slots可以获取父组件中slots传递的虚拟dom对象，在SFC模式和JSX /TSX中应该用处不大。
父组件：
模板
child msg= attrs接收非porps值传递子组件
！匿名投币口
Span默认插槽/span
！-命名插槽-
模板#标题
H1命名插槽/h1
/模板
！-范围插槽-
template # footer=“{ scope }”
页脚作用域槽3354名称：{{ scope.name }}，年龄{ { scope . age } }/页脚
/模板
/孩子
/模板
脚本设置
//引入子组件
从导入子级。/child.vue
/脚本
子组件：
模板
！匿名投币口
插槽/
！-命名插槽-
slot name=title /
！-范围插槽-
slot name=“footer”:scope=“state”/
！- $attrs用于获取不是父组件中的属性的参数，并传递给子组件-
p{{ attrs.msg==$attrs.msg }}/p
！-没错，我没想到会有用.
p{{ slots==$slots }}/p
/模板
脚本设置
从“vue”导入{ useSlots，useAttrs，reactive，toRef }
恒定状态=反应({
姓名：张三，
年龄：“18岁”
})
const slots=useSlots()
console . log(slots . default())；//获取默认插槽的虚拟dom对象
console . log(slots . title())；//获取命名标题槽的虚拟dom对象
//console . log(slots . footer())；//报告错误。不知道为什么带槽scope的不能收购。
//useAttrs()用于获取父组件传递的属性数据(即非props的属性值)。
const attrs=useAttrs()
/脚本
在JSX/TSX治下，UseSlots可能更实用。
如果你想在vite中使用jsx语法，你需要下载与jsx相关的插件来识别JSX。
UseSlots可以获取父组件传递的槽的虚拟dom对象，可以用来呈现槽的内容。
脚本语言=jsx
从“vue”导入{ defineComponent，use slots }；
导出默认定义组件({
setup() {
//获取插槽数据
const slots=use slots()；
//呈现组件
return ()=(
差异
{插槽. default？slots.default():}
{插槽. title？slots.title():}
/div
);
},
});
/脚本
大部分人都是SFC模式开发，槽可以用模板/通过槽/标签渲染。这种JSX书写方法应该很少有人使用。
6.在setup访问路由
访问路由实例组件信息：这在route和routersetup中是无法访问的。$路由器或者这个。无法再直接访问$route。(getCurrentInstance可以替换它，但不推荐)
建议：用useRoute函数和useroute函数代替这个。$route和这个。$路由器。
脚本设置
从“vue路由器”导入{ useRouter，useRoute }
const route=useRoute()
const router=useRouter()
函数pushWithQuery(查询){
router.push({
名称：“搜索”，
查询：{
.路由查询，
},
})
}
脚本/
导航防护仍然可以使用路由实例组件的导航防护。
从导入路由器。/路由器
router.beforeEach((收件人，发件人，下一个)={
})
还可以使用组合api的导航守护onbeforrouteleave、onbeforrouteupdate。
脚本设置
从“vue-router”导入{ onBeforeRouteLeave，onBeforeRouteUpdate }
//与beforeRouteLeave相同，不能访问。
onBeforeRouteLeave((收件人，发件人)={
const answer=window.confirm(
你真的想离开吗？您有未保存的更改！
)
//取消导航并停留在同一页面
如果(！回答)返回false
})
const userData=ref()
//与beforeRouteUpdate相同，无法访问。
onbeforeroutupdate(async(to，from)={
//仅在id更改时获取用户，例如，仅查询或哈希值更改
if (to.params.id！==from.params.id) {
user data . value=await fetchUser(to . params . id)
}
})
脚本/
复合API防护也可以用在router-view 渲染的任何组件中，它们不必像组件内防护那样直接用在路由组件上。
总结：setup的语法糖，作为Vue3的补充，让Vue3更饱满，让写Vue3更有乐趣。如果你觉得文笔不错，就不要吝啬。走之前给我点赞！
如果看完觉得意犹未尽，那就好像你没有拿到Vue3。有什么好的？请了解一下Vue3的自定义挂钩！
自定义挂钩的Vue3可能就是Vue3的完整体了！因为有些人看完这篇文章还觉得把Vue3函数和变量一起写不优雅！看看这篇文章吧！
Vue3编程流畅技巧定制挂钩
以上是Vue3编程流畅技巧使用设置语法糖拒绝写返回的详细内容。更多关于Vue3编程设置语法糖的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。