vue3的setup语法糖

一、前言：setup() 钩子是在组件中使用组合式 API 的入口
定义：我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const Number = ref(1)

    // 返回值会暴露给模板和**加粗样式**其他的选项式 API 钩子
    return {
      Number 
    }
  },

  mounted() {
    console.log(this.Number ) // 1
  }
}
</script>

<template>
  <button @click="Number++">{{ Number }}</button>
</template>

二、setup 函数的特点
1,在模板中访问从setup返回的ref时，它会自动浅层解包，因此你无需在模板中为它写.value,当通过this访问时也会同样如此解包。所以setup 函数返回的对象中的内容，可以直接在模板中使用
2.在 setup 函数中访问 this 会得到 undefined，因为它是针对函数式组件环境设计的。
3.setup 函数会在 beforeCreate 钩子之前调用，它“领先”于所有的生命周期钩子执行。

三、关于 props 的值

1. 父组件给子组件传值 user:'anny
   子组件setup可以取出该值：

import mycount from '../../util/count';
export default {
  name: "hello",
  props:{
    user:String
  },
  setup(msg) {
    console.log(msg.user)
    let {count} = mycount();
    return { count };
  }
};

** 2.有个小细节注意下**

请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。
如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}