script setup语法糖介绍

script setup语法糖介绍
概念
script setup是 Vue 3 提供的一种语法糖，它进一步简化了setup函数的使用。使用script setup时，不需要显式地定义setup函数，组件内部的顶层变量、函数等会自动暴露给模板使用，并且默认就是在setup函数的上下文中。
优势
减少了样板代码，使得组件的逻辑更加简洁和直观。它使得组件的脚本部分看起来更像是普通的 JavaScript 模块，提高了代码的可读性和可维护性。
变量和函数的暴露与使用
变量暴露
在script setup中，定义的响应式变量会自动暴露给模板。例如：

       <template>
         <div>
           <p>{{ count }}</p>
           <button @click="increment">Increment</button>
         </div>
       </template>
       <script setup>
       import { ref } from 'vue';
       const count = ref(0);
       const increment = () => {
         count.value++;
       };
       </script>

在这里，count是一个ref对象，increment是一个函数，它们都可以在模板中直接使用，不需要像传统setup函数那样通过return语句返回。
函数暴露
除了变量，函数也会自动暴露。如果有一些工具函数或者事件处理函数，它们可以直接在模板中调用。例如：

       <template>
         <div>
           <input type="text" v - model="inputValue">
           <button @click="handleSubmit">Submit</button>
         </div>
       </template>
       <script setup>
       import { ref } from 'vue';
       const inputValue = ref('');
       const handleSubmit = () => {
         console.log('Submitted value:', inputValue.value);
       };
       </script>

接收props和使用context
接收props
在script setup中接收props更加简洁。通过defineProps函数来定义props的类型，并且可以直接使用props中的属性。
例如，假设有一个MyComponent组件接收一个message属性：

       <template>
         <div>{{ message }}</div>
       </template>
       <script setup>
       const props = defineProps({
         message: String
       });
       </script>

在这里，props.message可以在模板中直接使用，并且defineProps函数会根据定义的类型进行类型检查。
使用context
context（包含attrs、slots和emit等）可以通过useContext函数获取，但在实际应用中，对于slots和emit，Vue 3 提供了更方便的方式来使用。
例如，对于自定义事件emit，可以直接使用defineEmits函数。假设组件有一个自定义事件update：

       <template>
         <div>
           <button @click="emitUpdate">Update</button>
         </div>
       </template>
       <script setup>
       const emit = defineEmits(['update']);
       const emitUpdate = () => {
         emit('update');
       };
       </script>

与其他组件特性的结合使用
使用计算属性
计算属性可以使用computed函数来创建，并且会自动暴露给模板。例如：

       <template>
         <div>
           <p>{{ fullName }}</p>
         </div>
       </template>
       <script setup>
       import { reactive, computed } from 'vue';
       const state = reactive({
         firstName: 'John',
         lastName: 'Doe'
       });
       const fullName = computed(() => {
         return state.firstName + ' ' + state.lastName;
       });
       </script>

使用生命周期钩子
生命周期钩子函数如onMounted、onUpdated等可以直接在script setup中使用。例如：

       <template>
         <div>
           <p>Component is mounted</p>
         </div>
       </template>
       <script setup>
       import { onMounted } from 'vue';
       onMounted(() => {
         console.log('Component is mounted');
       });
       </script>