script setup 实验性 vue 语法

这是一个简单的计数器例子，模板中使用 count 变量，inc 函数。

<template><button @click="inc">{{count}}</button>
</template>

如果模板上要使用的些变量，必须要在 setup 返回的对象中定义。

<script>
import { ref } from 'vue'export default {setup() {const count = ref(0)const inc = () => count.value++return {count,inc,}},
}
</script>

暴露变量必须 return 出来，这样还是比较繁琐，有没有更简单的办法，于是 script setup 语法出现。使用这个语法只需要在 script 标签上加上 setup 属性。

<script setup>import { ref } from 'vue'export const count = ref(0)export const inc = () => count.value++
</script>

当 <script> 标签具有 setup 属性时，组件在编译的过程中代码运行的上下文是 setup() 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

语法变得越来越简单，比如有外部组件导入到模板中使用时，只要几行代码就搞定了。

<template><Foo/><Bar/><component :is="ok ? Foo : Bar"/>
</template>

script setup 语法

<script setup="props">
export { default as Foo } from './Foo.vue'
export { default as Bar } from './Bar.vue'
export const ok = Math.random()
console.log(props)
</script>

vue3 语法

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {setup (props) {console.log(props)return {ok: Math.random(),Foo,Bar}}
}
</script>

其实 script setup 就相当于在编译运行时把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。

script setup 实验性 vue 语法相关推荐

介绍一下 Vue Conf 21 大会上：尤大提到 script setup 语法！
作者:Matt Maribojoc 译者:前端小智来源:stackabuse 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://githu ...
vue 3.2 的 script setup 语法
vue 3.2 已经正式支持 <script setup> 语法,并且现在就可以在生产环境下使用了,接下开始学习基本用法. <script setup> 是在单文件组件 (SF ...
vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
Vue3 script setup 语法糖详解
前言: 目前setup sugar已经进行了定稿,vue3 + setup sugar + TS的写法看起来很香,写本文时 Vue 版本是 "^3.2.6" 1.script se ...
script setup 语法使用
vue3.2正式版已经发布,script setup语法已经由实验性质改为了正式语法,可以放心大胆的在项目中用了. 官方文档:https://v3.cn.vuejs.org/api/sfc-scrip ...
vue3 + ts ＜script setup＞语法糖
这里是引用 1.data 2.computed 3.父传子 4.子传父 5.原型链绑定和组件使用 6.父子组件 v-model 7.nextTick 8.插槽 9.路由useRoute和useRout ...
尤大都说Vue3 + script setup + TS + Volar真香，你说香不香？
前两天尤大官宣发布了Vue3.2,支持了好几个很不错的新特性,而且自信放话:<script setup> + TS + Volar = 真香,是时候了想看Vue3.2更新的内容文档的读者 ...
vue3 setup写法（语法糖版本）
vue3.2 版本开始才能使用语法糖! 在 Vue3.0 中变量必须 return 出来, template 中才能使用:而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无 ...
vue3 script setup写法
公司代码扫描要求一个函数不能超过50行,那么一般vue3写法setup函数肯定超了,又懒得写到hooks,同事介绍了去年vue3出的新的语法糖,研究了下,写篇博客简单的将,去掉了exprot def ...

script setup 实验性 vue 语法

script setup 实验性 vue 语法相关推荐

最新文章

热门文章