vue3中script里使用setup语法糖

介绍

在 vue3 中，定义变量，使用方法等都需要通过setup() 函数手动暴露出去才可以使用；当定义的变量，或者使用的方法过多的时候，一个个去 return会很繁琐；通过在 script 里添加setup可以直接简化这些代码，不用重复的手动去暴露；具体使用方式是 <script setup></script>
优点：

1. 简化了组合 API 必须 return 的写法，简化了代码量
2. 拥有更好的运行时性能
3. import 引入的组件也会自动导出，模板里可以直接引用。

使用

 <!-- 使用方式，需要在 <script> 代码块上添加 setup -->
<script setup>
  // 直接引入组件即可，因为使用了setup，他会自动注册；
  import anotherPage from "./components/AnotherPage.vue" 
  // 使用 defineExpose,defineEmits,defineProps。都不用import
  import {
    
    
  ref,
  reactive,
  watch,
} from "vue";

  // 组件传值
  const props = defineProps({
    
    
    list: {
    
    
      type: Array,
      default: [],
    },
    title: {
    
    
      type: String,
      default: "标题"
    }
  })
  // 向组件传递方法
  const emits = defineEmits(["changeNum"])

   // 定义变量
  const number = ref('1001')
  const user = reactive({
    
    
    name: lisa,
    age: 10
  })
  // 定义方法
  const addNum = () => {
    
    
    number.value++;
    user.age = 11;
  }
  // 向组件传递方法
  const changeNum = (val) => {
    
    
    emits("changeNum",val)
  }

  // 将组件属性和方法暴露出去，供父组件使用
  defineExpose({
    
    
    number,  // 暴露属性
    user,  // 暴露属性
    addNum, // 暴露方法
  })
</script>