vue3 setup的作用实例详解

代码实例如下：

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

<script>
import { ref } from 'vue'

export default {
    setup() {
       const count = ref(0)
       
       //返回值会暴露给模板和其他的选项式 API钩子
       return {
           count       
       }                                         
    },
    
    mounted() {
        console.log(this.count)  //0    
    }
}
</script>

一、setup具体怎么用

setup用来写组合式API，从生命周期的角度，相当于取代了beforeCreate()

二、setup的数据和方法如何使用？

1.setup() {}内部的属性和方法，必须用return暴露出来。
将属性挂载到实例上，否则没有办法使用。
语法糖：写在script开始标签中，内部的属性和方法，无需return暴露；

<script setup>
</<script>

2、setup内部使用时，没有this
3、钩子函数可以和setup并列存在
4、setup不能调用生命周期相关函数，或者嵌套存在
5、生命周期相关函数可以调用setup相关的属性和方法
6、可以使用this

三、setup特性总结

1、setup这个函数会在created之前执行
2、setup内部没有this，不能挂载this相关的东西
3、setup内部的属性和方法，必须return暴露出来。（语法糖中不需要）
4、setup内部的属性都不是响应式的
5、setup不能调用生命周期相关函数，但生命周期相关函数可以调用setup

四、setup函数的写法

<script>
import { ref } from 'vue'
export default {
    setup(){
        const num = ref(1);
        return { num }    
    }
}
</script>
setup函数的写法中定义的变量和函数都需要return出来，不然无法正常使用。

五、语法糖的写法

<script setup>
  import { ref } from 'vue'
  const num = ref(1)
</script>
在<script setup>语法糖中的定义的变量和函数无需return。里面的代码会被编译成组件setup()函数的内容。
这意味着与普通的<script>只在组件被首次引入的时候执行一次不同，<script setup>中的代码会在每次组件实例被创建的时候执行。