Vue3中 Composition API的介绍

最新推荐文章于 2024-09-19 10:29:21 发布

IT_全世界的屋顶

最新推荐文章于 2024-09-19 10:29:21 发布

阅读量1k

点赞数 2

分类专栏： Vue3

本文链接：https://blog.csdn.net/weixin_50313248/article/details/118547983

版权

Vue3的Composition API提供了一种新的组织组件逻辑的方式，增强了代码的可维护性和复用性。setup函数是核心，接受Props和Context参数。本文介绍了setup中的Props、toRefs、computed、watchEffect等，以及Provider Inject的使用，帮助理解Vue3的响应式系统和生命周期。

摘要由CSDN通过智能技术生成

Composition API的介绍

一、 Composition API的介绍

Composition API也叫组合式API，是Vue3.x的新特性。

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。

通俗的讲：

没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码可复用性不高。Vue3.x中的composition-api就是为了解决这个问题而生的。

compositon-api提供了以下几个函数：

setup
ref
reactive
watchEffect
watch
computed
toRefs
生命周期的hooks

二、setup组件选项

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

提示：

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

使用 setup 函数时，它将接受两个参数：

props
context

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

2.1、Props

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

// MyBook.vue

export default {
   
  props: {
   
    title: String
  },
  setup(props) {
   
    console.log(props.title)
  }
}

注意：

但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

// MyBook.vue

import {
    toRefs } from 'vue'

setup(props) {
   
	const {
    title } = toRefs(props)

	console.log(title.value)
}

2.2、上下文

传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

// MyBook.vue

export default {
   
  setup(props, context) {
   
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

// MyBook.vue
export default {
   
  setup(props, {
    attrs, slots, emit }) {
   
    ...
  }
}

attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作。

2.3、setup组件的 property

执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：

props
attrs
slots
emit

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

data
computed
methods

2.4、ref reactive 以及setup结合模板使用

在看setup结合模板使用之前，我们首先得知道ref 和 reactive 方法。

如果 setup 返回一个对象则可以在模板中绑定对象中的属性和方法，但是要定义响应式数据的时候可以使用ref, reactive方法定义响应式的数据。

错误写法

<template>
{
   {
   msg}}
<br>

<button @click="updateMsg">改变etup中的msg</button>

<br>
</template>

<script>
export default {
   
    data() {
   
        return {
   

        }
    },
    setup() {
   
        let msg = "这是setup中的msg";
        let updateMsg = () => {
   
            alert("触发方法")
            msg = "改变后的值"
        }
        return {
   
            msg,
            updateMsg
        }
    },

}
</script>

<style lang="scss">
.home {
   
    position: relative;
}
</style>

正确写法一：

ref用来定义响应式的字符串、数值、数组、Bool类型

import {
   ref} from 'vue'
<template>
{
   {
   msg}}
<br>
<br>
<button @click="updateMsg">改变etup中的msg</button>
<br>
<br>
<ul>
    <li v-for="(item,index) in list" :key="index">
        {
   {
   item}}
    </li>
</ul>

<br>
</template>

<script>
import {
   ref} from 'vue'
export default {
   
    data() {
   
        return {
   

        }
    },
    setup() {
   
        let msg = ref("这是setup中的msg");

        let list = ref(["马总", "李总", "刘总"])

        let updateMsg = () => {
   
            alert("触发方法");
            msg.value = "改变后的值"
        }
        return {
   
            msg,
            list,
            updateMsg
        }
    <