vue3 ---＞ setup() 用法 响应式API - reactive 响应式API - ref

setup() 介绍

参考官方文档
使用 setup 函数时，它将接收两个参数：

props
context
//让我们更深入地研究如何使用每个参数

Props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

Context
传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

访问组件的 property

执行 setup 时，你只能访问以下 property：

props
attrs
slots
emit
换句话说，你将无法访问以下组件选项：

data
computed
methods
refs (模板 ref)

#结合模板使用
如果 setup 返回一个对象，那么该对象的 property 以及传递给 setup 的 props 参数中的 property 就都可以在模板中访问到：

使用渲染函数

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

使用 this
在 setup() 内部，this 不是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆。

setup入口函数

** 能够理解setup函数的作用和调用时机**

export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}

总结:主要内容

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
2. setup函数只会在组件初始化的时候执行一次
3. setup函数在beforeCreate生命周期钩子执行之前执行，this不指向当前实例

响应式API - reactive

作用

​ reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

使用步骤

1. 从vue框架中导入reactive函数
2. 在setup函数中调用reactive函数并将想要变成响应式的对象数据当成参数传入
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

 <template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>
 
 <script>
import { reactive } from 'vue'
export default {
 setup() {
  const state=reactive({
    name:'cp',
    age:18
     })
   return { 
     state
     }
   }
 }
 </script>

响应式API - ref

作用

​ ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

使用步骤

1. 从vue框架中导出ref函数
2. 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
4. **注意：**在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

reative 对比 ref

知道俩个API的特定以及如何在项目中选择

 1. ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
 2. reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换
 3. **推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担