Vue setup语法糖

简介: Vue setup语法糖

vue setup语法糖


setup语法糖指的是Vue组件当中的setup字段


是 Vue3 的一个新语法糖,在 setup 函数中。


所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。


相对于之前的写法,使用后,语法也变得更简单。


使用方式就是仅需要在 script 标签加上 setup 关键字即可。


<script setup></script>

setup语法糖的一些优势


组件自动注册


在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,如果是export default

的写法,还需要使用components选项内注册引入的组件。


变量和方法无需返回,直接使用


在之前的写法中,定义数据和方法,都需要在结尾 return 出去,才能在模板区中使用。在 script setup 中,


定义的属性和方法无需返回,可以直接使用


相关文章
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
2天前
|
JavaScript
vue知识点
vue知识点
16 5
|
4天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
13 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
13 1
|
4天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
13 0
|
4天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
11 0
|
前端开发 API
Vue3入门到精通-setup
Vue3入门到精通-setup
|
5天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
15 2