1、组合式API – setup选项

<script setup>
  //数据
  const message = 'this is a message'
  //函数
  const logMessage = () => {
    console.log(message);
  }
</script>

1. setup选项的执行时机？
beforeCreate钩子之前 自动执行
2. setup写代码的特点是什么？
定义数据 + 函数 然后以对象方式return
3. <script setup>解决了什么问题？
经过语法糖的封装更简单的使用组合式API
4. setup中的this还指向组件实例吗？
指向undefined

2、组合式API – reactive和ref

reactive()

作用：接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤：

1. 从 vue 包中导入 reactive 函数
2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

<script setup>
  //导入
  import { reactive } from 'vue'

  //执行函数 传入参数 变量接收
  const state = reactive(对象类型数据)
</script>

ref()（重要）

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：

1. 从 vue 包中导入 ref 函数
2. 在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回

<script setup>
  //导入
  import { ref } from 'vue'

  //执行函数 传入参数 变量接收
  const state = ref(简单类型或者对象类型数据)
</script>

注意点：
1.脚本中访问数据，需要通过.value
2.在template中，.value不需要加（帮我们扒了一层皮）

总结：

• reactive和ref函数的共同作用是什么 ？
  用函数调用的方式生成响应式数据
• reactive vs ref ？
  reactive不能处理简单类型的数据
  ref参数类型支持更好但是必须通过.value访问修改
  ref函数的内部实现依赖于reactive函数
• 在实际工作中推荐使用哪个？
  推荐使用ref函数，更加灵活统一

3、组合式API – computed

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法
核心步骤：

1. 导入computed函数
2. 执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收

const 计算属性 = computed(() => {
  return 计算返回的结果
})

计算公式：始终从原始响应式数组中筛选出大于2的所有项 – filte

• 1.计算属性中不应该有“副作用”
  比如异步请求/修改dom
• 2.避免直接修改计算属性的值
  计算属性应该是只读的，特殊情况可以配置 get set

4、组合式API – watch

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）