vue3 new experimental properties script setup <script setup>

Vue3 introduces a new script type in the single file component

Example

<script setup>
  import {
    
     ref } from 'vue'

  // 像在平常的setup中code
  // 但是不需要返回任何变量
  const count = ref(0)//在此处定义的count可以直接在模板html中引用
  const inc = () => {
    
    //函数也可以直接引用,而不用返回
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

The components introduced in setup can be used directly

<script setup>
  import Foo from './Foo.vue'
  import MyComponent from './MyComponent.vue'
</script>

<template>
  <Foo />
  <!-- kebab-case also works -->
  <my-component />
</template>

Compatible with props, emit, context

import {
    
     defineProps, defineEmit, useContext } from 'vue'

  const props = defineProps({
    
    
    foo: String,
  })
  const emit = defineEmit(['change', 'delete'])
  const {
    
     slots, attrs } = useContext()

github