这是一个简单的计数器例子,模板中使用 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 函数中运行,然后把导出的变量定义到上下文中,并包含在返回的对象中。

Logo

前往低代码交流专区

更多推荐