setup 函数

因为vue3的一大特色就是composition API，区别于vue2的options API，但是composition api的使用, 需要配置一个setup 函数
setup函数，是比 beforeCreate函数的执行顺序还要早的，且之前vue2中的那些data、 methods、computed等等的模块，都可以直接写在setup中，用return出一个对象的方法实现。
也就是说，compositionAPI 是基于 逻辑功能 组织代码的, 一个功能 api 相关放到一起。

setup 函数的特点

1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
3. setup 中不能使用 this, this 指向 undefined
4. 在模版中需要使用的数据和函数，需要在 setup 返回。

  <div>num: {{ num }}</div>
  <div>num1: {{ num1 }}</div>

export default {
  setup () {
    let num = 1
    let num1 = 2
    return {
      num,
      num1
    }
  }
}

在vue组件中如代码，可以将数据渲染到页面是没问题的，但是，这个数据就不像之前写在data中那样，直接就是响应式的。此时引出reactive 函数

reactive 函数

作用

传入一个复杂数据类型，将复杂数据类型，转换成响应式数据（返回该对象的响应式代理）

  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <button @click="obj.name = 'ls'">改值</button>

import { reactive } from 'vue'

export default {
  setup () {
    // 1. setup 需要返回值, 返回的值才能在模板中使用
    // 2. 默认的普通的值不是响应式的, 需要用 reactive 函数
    const obj = reactive({
      name: 'zs',
      age: 18
    })

    return {
      obj
    }
  }
}

页面初始：

当我点击按钮改变值时：

此时，页面也渲染出了数据，是响应式的数据了。

特点

此处应知：vue3中，所有的函数，想要使用必须从vue中导入：

import { reactive ,computed} from 'vue'

此方法在vue3.2版本后，就没有另一个方法ref的效率高，也没有ref应用面广泛（比如简单数据类型，reactive函数就无法处理成响应式数据）。由此，引出ref函数

ref 函数

作用

1. ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value
2. 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值
3. 在模板中, ref 属性会自动解套, 不需要额外的 .value
4. ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理

  <div>{{ money }}</div>
  <button @click="money++">数值++</button>

import {  ref } from 'vue'
export default {
  setup () {
  // 其本质，还是返回了一个对象，并且，此对象的value值是响应式数据，也是ref中的值。
    let money = ref(100)
    money.value++
    return {
      money
    }
  }
}

以上代码，每当点击数值++就会加一，且渲染到页面。
此时，我们打印出ref函数返回的值是什么：

可以看到，打印出的是一个对象，其中的value属性，就是传入ref函数的参数，且是响应式数据。
同理，ref函数的参数中传入一个对象，获取这个对象的属性时，依然要用.value先获取到这个对象。（在template里面，可以省略.value）
以上语法多多练习，熟悉以后发现，也还是很麻烦，有没有更简洁、更优雅的写法？有，就是vue3.2后新添加的一个语法：script setup语法

script setup语法（*）

script setup是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script 语法更加简洁
要使用这个语法，需要将 setup attribute 添加到 <script> 代码块上：

<script setup>
console.log('hello script setup')
</script>

顶层的绑定会自动暴露给模板，所以定义的变量，函数和import导入的内容都可以直接在模板中直接使用