Vue3-CompositionAPI-2

computed

在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理
- 在前面的Options API中，我们是使用computed选项来完成的；
- 在Composition API中，我们可以在 setup 函数中使用 computed 方法来编写一个计算属性；
如何使用computed呢？
- 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
- 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象；

setup中使用ref

在setup中如何使用ref获取元素或者组件？
- 其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可；

生命周期钩子

我们前面说过 setup 可以用来替代 data 、 methods 、 computed 等等这些选项，也可以替代生命周期钩子。
那么setup中如何使用生命周期函数呢？
- 可以使用直接导入的 onX 函数注册生命周期钩子；

Provide函数

事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。
我们可以通过 provide来提供数据：
- 可以通过 provide 方法来定义每个 Property；
provide可以传入两个参数：
- name：提供的属性名称；
- value：提供的属性值；

Inject函数

在后代组件中可以通过 inject 来注入需要的属性和对应的值：
- 可以通过 inject 来注入需要的内容；
inject可以传入两个参数：
- 要 inject 的 property 的 name；
- 默认值；

App.vue

<template>
  <div>AppContent: {{ name }}</div>
  <button @click="name = 'kobe'">app btn</button>
  <show-info></show-info>
</template>

<script>
  import { provide, ref } from 'vue'
  import ShowInfo from './ShowInfo.vue'

  export default {
    components: {
      ShowInfo
    },
    setup() {
      const name = ref("why")

      provide("name", name)
      provide("age", 18)

      return {
        name
      }
    }
  }
</script>

<style scoped>
</style>

ShowInfo.vue

<template>
  <div>ShowInfo: {{ name }}-{{ age }}-{{ height }} </div>
</template>

<script>
  import { inject } from 'vue'

  export default {
    // inject的options api注入, 那么依然需要手动来解包
    // inject: ["name", "age"],
    setup() {
      const name = inject("name")
      const age = inject("age")
      const height = inject("height", 1.88)

      return {
        name,
        age,
        height
      }
    }
  }
</script>

<style scoped>
</style>

数据的响应式

◼ 为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 和 reactive。

侦听数据的变化

在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。
在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；
- watchEffect：用于自动收集响应式数据的依赖；
- watch：需要手动指定侦听的数据源