vue3.2 setup语法糖，你值得拥有

0、前言

在vue3中删除了vue2中的data函数，因此，vue3.0要在template中使用某些变量就必须在最后return出来，多次声明变量，不太方便，也不太友好。而在vue3.2版本之后，我们只需在script标签上加上setup属性，不需要再写return就可以直接在template中使用，写起代码就很流畅。哎，这就很棒！

vue3.0的写法示例代码。

<template>
  <div>
    <p>{{ `${state.name}发布于${state.age}，${msg}` }}</p>

    <button @click="onClick">点击</button>

    <ChildComp />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue"
import ChildComp from './ChildComp.vue'

export default defineComponent({
  // 注册组件
  components: {
    ChildComp
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  emits: ['on-confirm'],

  setup(props, { emit }) {
    console.log(props.show) // false

    const msg = ref('');
    msg.value = '哎，这就很不棒！';

    const state = reactive({
      name: 'vue3.0',
      age: '2020年9月18日'
    })
    // 点击事件
    const onClick = () => {
      emit('on-confirm')
    }
    // 必须return出来
    return {
      msg,
      state,
      onClick
    }
  }
})
</script>

刚开始使用 script setup 语法糖的时候，编辑器会提示这是一个实验属性，要使用的话，需要固定 vue 版本。在2021年 6 月底，该提案被正式定稿，在 vue3.1.3 的版本上，继续使用但仍会有实验性提案的提示，在 vue3.2 中，才会去除提示并移除一些废弃的 API。

script setup 是 vue3.2 的新语法糖，并不是新增的功能模块，主要好处有：（1）更少的模板内容，代码简洁，不需要写return；（2）能够使用ts更好的声明props，以及抛出事件；（3）更好的运行时性能。

1、变量、方法不需要renturn

变量、方法以及import导入的内容不用在 return 暴露出来，不需要写 export default 和 setup 函数，只需在 script 标签加上 setup 属性，直接声明变量、方法以及import导入的内容使用即可，使模板代码更加简洁。

<template>
  <div>
    <!-- 使用变量 -->
    <p>{{ `${state.name}发布于${state.age}，${msg}` }}</p>
    <!-- import导入 -->
    <ul>
      <li v-for="item in subjectList" :key="item.value">
        {{item.label}}
      </li>
    </ul>
    <!-- 使用方法 -->
    <button @click="onClick">点击</button>
  </div>
</template>

<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import { ref, reactive } from "vue"
import { subjectList } from './utils.js'

const msg = ref('');
msg.value = '哎，这就很棒！';

const state = reactive({
  name: 'vue3',
  age: '2020年9月18日'
})

// 点击事件
const onClick = ():void => {
  console.log('点击了')
}
</script>

2、引入组件自动注册

在 script setup 语法糖中引入组件，组件不需要在 components 中注册了，引入的组件会自动注册，而且组件无法指定 name属性，主要以文件的名字为主，省略name属性

<template>
  <div>
    <Child />
  </div>
</template>

<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import Child from './Child.vue'
</script>

3、defineProps和defineEmits

在script setup中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 script setup 中不需要导入是直接可用的。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围，因此，传入的选项不能引用在 setup 范围中声明的局部变量，这样做会引起编译错误。

（1）defineProps

//父组件
<template>
  <div>
    <Child :name="name" />
  </div>
</template>

<!-- 在script标签上添加setup属性 -->
<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';

const name = ref('张三')
</script>

//子组件
<template>
  <div>
    <p>{{ `${props.name}在学习JavaScript` }}</p>
  </div>
</template>

<script setup lang="ts">
// defineProps不需要从vue中导入
const props = defineProps({
  name: {
    type: String,
    default: '张三'
  }
})
// 或者
const props = defineProps(['name'])
</script>

（2）defineEmits

// 父组件
<template>
  <div>
    <Child @on-confirm="onConfirm" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';

const show = ref(false)
// 点击确定关闭弹框等操作
const onConfirm = (val: boolean) => {
  show.value = val
} 
</script>

// 子组件
<template>
  <button type="button" @click="handleConfirm">确定</button>
</template>

<script setup lang="ts">
const emit = defineEmits(['on-confirm'])

const handleConfirm = () => {
  // 此处也可以传入参数
  emit('on-confirm', false)
}
</script>

4、defineExpose

defineExpose可以主动暴露出组件的属性和方法。

// 子组件示例代码
// 子组件
<template>
  <div v-if="show">
    <p>{{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0)
const show = ref(false)

const onShow = () => {
  show.value = true
}
// defineExpose暴露出count属性和onShow方法
defineExpose({
  count,
  onShow
})
</script>

// 父组件示例代码
// 父组件
<template>
  <div>
    <button type="button" @click="onClick">父组件点击</button>
    <Child ref="childRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';
// Child组件的ref
const childRef = ref(null)

// 在父组件操作子组件的暴露出的属性或方法
const onClick = () => {
  childRef.value.count += 1;
  childRef.value.onShow();
}
</script>

5、useSlots和useAttrs

在 script setup 使用 slots 和 attrs 的情况应该是很比较少见的，大部分人是(SFC)模式开发，在