Vue3.2 setup语法糖学习与理解

1. 起初 Vue3.0 版本暴露变量必须 return 出来，template中才能使用。
2. 现在在 vue3.2 版本只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

先来一个小案例尝尝鲜，对比之前的写法少些繁琐的代码，代码看起来更简洁。

组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过 components 进行注册。示例：

<template>
    <hello-world></hello-world>
</template>

<script setup>
  import helloWorld from './helloWorld'
</script>

因为没有了setup函数，那么props，emit怎么获取呢？setup script语法糖提供了新的API来供我们使用。

新增 API 之 defineProps : 用来接收父组件传来的 props。

父组件：

<template>
  <hello-world :name="name"></hello-world>
</template>

<script setup>
  import helloWorld from './helloWorld'
  import {
    ref } from 'vue'
  let name = ref('xia