Composition API 怎么编写

2023-11-19 19:49:10

下面先从setup Fuction 开始编写Compositon API.

1⃣️ setup

新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。

⚠️ setup执行时间：The setup executes before any of the following options are evaluated：（ Components、 Props 、Data、Methods、Computed Properties、Lifecycle methods）

⚠️ 由于在执行 setup 时，尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

与其他Component选项不同，setup该方法无权访问“ this”。为了获得对属性的访问权限（之前用this获取的），setup具有两个可选参数。

我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

第一个是props，例如：

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    console.log(props) // { user: '' }

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

第二个参数是context，它可以访问一堆有用的数据：

setup(props, context) {
  context.attrs;
  context.slots;
  context.parent;
  context.root;
  context.emit;
}

2⃣️、ref函数

<template>
 <div>Capacity: {{ capacity }}</div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const capacity = ref(3);
    // additional code to write
  }
};
</script>

const capacity = ref(3) 基本上，它将原始整数（3）包装在一个对象中，这将使我们能够跟踪更改。

以前data()选项已经将我们的原始（容量）包装在一个对象内。

另外： composition API允许我们声明不与组件相关联的反应性基元，这就是我们的方法。

最后一步，我们需要显式返回一个对象，该对象的属性需要模板正确呈现。

<template>
  <div>Capacity: {{ capacity }}</div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const capacity = ref(3);
    return { capacity };
  }
};
</script>

这个返回的对象是我们如何在中公开需要访问哪些数据的方法renderContext。

像这样明确表示有点冗长，但这也是故意的。它有助于长期维护，因为我们可以控制暴露给模板的内容，并跟踪定义模板属性的位置。

3⃣️、setup中的钩子

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来像 onMounted。

4⃣️、watch 响应式更改

它接受 3 个参数：

一个响应式引用或我们想要侦听的 getter 函数
一个回调
可选的配置选项

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})
//每当 counter 被修改时 counter.value=5，watch 将触发并执行回调 (第二个参数)，在本例中，它将把 'The new counter value is:5' 记录到我们的控制台中

5⃣️、toRefs

toRefs 是为了确保侦听器能够对 user prop 所做的更改做出反应。

6⃣️、独立的 computed 属性

与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数，在 Vue 组件外部创建计算属性。

computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输出的一个只读的响应式引用。

为了访问新创建的计算变量的 value，我们需要像使用 ref 一样使用 .value property。

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

7⃣️、组合式函数

（现在只有两个功能，获取用户数据➕搜索功能。对于其他的逻辑关注点我们也可以这样做，setup随着功能的增多，会越来越大

码农公寓

相关文章