Vue3.0中setup语法糖的使用

可以说setup函数是Vue3.0的最重要的核心方法之一。setup函数在组件创建前执行，并且充当Componsition API的入口。

---

使用setup函数应该注意：

1. setup函数中没有this, 因为setup函数在beforeCreated之前就执行了

2. setup其本身不可以为异步函数

3. setup内可以执行await方法处理异步问题

4. setup函数接收两个参数，props和context（context包含3个参数attrs,slots,emit）,而context是可以被解构的

---

我们可以与Vue2.x做一下类比，这样更加能够帮助我们如何用Vue3.0做开发

1、data变量声明的变化

在Vue2.x中，data是通过Vue的工厂函数创建,原理是通过Object.defineProperties去创建或者修改Vue实例的属性。

<script>
export default {
    data () {
        return {
            mgs: "Hellow World"
        }    
    }
}
</script>

而在Vue3.0中就不一样了，是通过Vue3.0的Componsition API，reactive、ref、toRefs将setup中声明的变量转变成Vue可以监听的对象

<script>
import { defineComponent, ref, toRefs, reactive} from 'vue'
export default defineComponent({
    setup(){
        // ref声明响应式数据，用于声明非引用类型
        const active = ref(0)
        // 修改
        active.value = 1

        // reactive声明响应式数据，用于声明引用数据类型
        const state = reactive({
            name: 'Jerry',
            sex: '男'
        })
        // 修改
        state.name = 'Tom'
  
        // 使用toRefs解构
        const {name, sex} = toRefs(state)
        
        return {
            active,
            state
        }
    }
})
</script>

或者setup语法糖的形式

<script setup>
 import { reactive, ref, toRefs } fr