vue3 setup语法糖学习

这段时间团队的小伙伴写了一个小项目前端用的是vue3+ts， 后端用的php，但前端虽然用的是vue3但还是没有用vue3 setup语法糖，写法没到达到极致，争取下一个项目用上vue3的setup语法糖，这样更省事，今天就来一起学一学vue3的setup语法糖，看看它有那些优点：

VUE3版本变更説明:

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

原来旧版的写法：

 <template>
        {{msg}}
    </template>
<script>
import {ref} from 'vue'

export default {
  name: 'App',
  setup() {
       const msg = ref("Hello Word!!!")
      return {
       msg
      };
  }
}
</script>

用vue3 setup语法糖的写法:

<template>
  {{msg}}
</template>
<script setup>
import { ref } from "vue";
const msg = ref("Hello Word!!!")
</script>

setup script 语法更加简洁，属性和方法不需要返回暴露出去，template模板中就可以直接使用

这个语法糖在2021年6月29日的vue3版本正式支持了，有兴趣的同学快去试试吧，我们的下一个项目的也会改成这种写法，这样就更优雅，简洁