十一、组合API（1）

最新推荐文章于 2023-07-24 23:22:12 发布
最新推荐文章于 2023-07-24 23:22:12 发布
阅读量1.8k 收藏
点赞数
分类专栏： # Vue.js 3.0 从入门到实战 文章标签： vue.js 为什么要引入组合API setup 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GXL_1012/article/details/127969888
版权

本章概要

  • 为什么要引入组合API
  • setup() 函数

组合（Composition）API 是在 Vue 3.0 中引入的，它是一组附加的、基于函数的 API ，允许灵活地组合组件逻辑。
组合 API 并没有引入新的概念，更多地是将 Vue 的核心功能（如创建和观察响应状态）公开为独立函数，以此来代替 Vue 2.x 中的表达组件逻辑的选项。

11.1 为什么要引入组合API

使用 Vue 构建中小型应用程序是很容易，但随着 Vue 逐渐被开发人员所认可，许多用户开始使用 Vue 构建大型项目，这些项目由一个多名开发人员组成的团队在很长一段时间内迭代和维护，在一些项目中遇到了 Vue 2.x 所要求的编程模型的限制，遇到的问题可以归纳为以下两类：

  • 随着时间的推移，复杂组件的代码越来越难以理解，尤其是当开发人员在阅读不是自己编写的代码时。根本原因是 Vue 2.x 的现有 API 强制按选项组织代码，在某些情况下，按逻辑关注点组织代码更有意义。
  • 缺乏在多个组件之间提取和重用逻辑的干净且无成本的机制。

Vue 3.0 新增的组合 API 为用户组织组件代码提供了更大的灵活性。现在，可以将代码编写为函数，每个函数处理一个特定的功能，而不再需要按选项组织代码了。组合 API 还使用在组件之间甚至外部组件之间提取和重用逻辑变得更加简单。

此外，由于组合 API 是一套基于函数的 API ，因此能够更好地与 TypeScript 集成，使用组合 API 编写的代码可以享受完整的类型推断。组合 API 也可以与现有的基于选项的 API 一起使用，不过组合 API 是在选项（data、computed和methods）之前解析，因此在组合 API 中是无法访问这些选项所定义的属性的。

11.2 setup() 函数

setup() 函数是一个新的组件选项，它作为在组件内部使用组合 API 的入点口。setup() 函数在初始的 prop 解析之后，组件实例创建之前被调用。对于组件的生命周期钩子，setup() 函数在 beforeCreate 钩子之前调用。
如果 setup() 函数返回一个对象，该对象上的属性将被合并到组件模板的渲染上下文中。

const App = {
    setup(){
        // 为目标对象创建一个响应式对象
        const state = Vue.reactive({count: 0});
        function increment(){
            state.count++;
        }
              // 返回一个对象，该对象上的属性可以在模板中使用
        return {
            state,
            increment
        }   
    }
};

setup() 函数返回的对象有两个属性，一个是响应式对象（即为原始对象创建的代理对象），另一个是函数。在 DOM 模板中，可以直接使用这两个属性。如下：

<button @click="increment">count 值：{{ state.count }}</button>

需要注意的是，当和现有的基于选项的 API 一起使用时，从 setup() 函数返回的属性在选项中可以通过 this 访问。
setup() 函数可以接受两个可选参数，第一个参数是已解析的 props ，通过该参数可以访问在 props 选项中定义的 prop。如下：

app.component('PostItem',{
    // 声明 props
    props:['postTitle'],
    setup(props){
        console.log(props.postTitle);
    }
})

setup() 函数接受的 props 对象是响应式的，也就是说，在组件外部传入新的 prop 值时，props 对象也会更新，可以调用 watchEffect() 或 watch() 方法监听对象并对更改做出响应。如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        <post-item :post-title="title"></post-item>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    title: '扁扁'
                }
            }
        });
        app.component('PostItem', {
            //声明props
            props: ['postTitle'],
            setup(props) {
                Vue.watchEffect(() => {
                    console.log(props.postTitle);
                })
            },
            template: '<h3>{{ postTitle }}</h3>'
        });
        const vm = app.mount('#app');
    </script>
</body>

</html>

在谷歌浏览器中打开页面，在 console 窗口中输入 vm.title=“圆圆” ，会看到除了页面内容发生更新外，Console 窗口中也会输出“圆圆”。如下：
在这里插入图片描述

注意：不要去结构 props 对象，否则会失去响应性。如下：

app.component('PostItem', {
    //声明props
    props: ['postTitle'],
    setup({postTitle}) {
        Vue.watchEffect(() => {
            // 不再是响应式的
            console.log(postTitle); 
        })
    }
});

同时也要注意，不要试图去修改 props 对象，否则，将得到一个警告。

setup() 函数接受的第二个可选参数是一个 context 对象，该对象是一个普通的 JavaScript 对象，它公开了 3 组件属性。代码如下：

const MyComponent = {
    setup(props,context){
        // 属性（非响应式）
        console.log(context.attrs)
        // 插槽（非响应式）
        console.log(context.slots)
        // 发出的事件（方法）
        console.log(context.emit)
    }
}

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

attrs 和 slots 是有状态的对象，当组件本身被更新时，他们也总是被更新。但 attrs 和 slots 对象本身并不是响应式的，所以不应该对它们进行解构，并始终将属性引用为 attrs.x 或 slots.x。如下：

  const MyComponent = {
      setup(props,{attrs}){
          // 在稍后阶段可能被调用的函数
          function onClick(){
              // 保证是最新的引用
              console.log(attrs.foo) 
          }
      }
  }

最后要强调的是，当 setup() 函数和选项 API 一起使用时，在 setup() 函数内部不要使用 this。因为 setup() 函数是在选项被解析之前调用的。也就是，在 setup() 函数内不能访问 data 、 computed、methods 组件选项。例如，下面的代码是错误的：

setup(){
	function onClick(){
    this // 并不是预期的 this
  }
}
一只小熊猫呀
关注
专栏目录
组合式(Composition)API
baichaji的博客
03-26 4376
我们可以使用reactive()来创建一个数组或者对象在template中直接使用，在方法或者回调函数中使用todolistreactive()的局限性仅对对象类型有效（对象、数组和MapSet这样的集合类型），而对stringnumber和boolean这样的原始类型无效。因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失。
Vue快速入门(三)——组合式API常见问题
最新发布
bjzhang75的博客
08-11 802
组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。
组合式API
richest_qi的博客
05-18 2340
文章目录使用Vue CLI新建项目demo启动项目demo改造项目public目录下新增data.jsonsrc目录下新增api目录，api目录下新增repositories.jscomponents目录下删除HelloWorld.vue，新增RepositoriesList.vue修改App.vue启动应用组合式API参考文章 使用Vue CLI新建项目demo D:\VueProjects>vue create demo Vue CLI v4.5.13 ? Please pick a prese
组合API
qwsbcjendb的博客
07-24 108
组合API
架构模式：API组合
weixin_30861797的博客
08-03 271
架构模式: API组合 上下文 您已应用微服务架构模式和每服务数据库模式。因此，实现从多个服务连接数据的查询不再是直截了当的。 问题 如何在微服务架构中实现查询？ 结论 通过定义API Composer来实现查询，该API Composer调用拥有数据的服务并执行结果的内存中连接。​ 例子 API网关通常执行API组合。 结果上下文 这种模式具有以下好处： 这是一种在微服...
setup组合api
qianjun111111的博客
03-16 506
一 组合api特点 1. 更加直观，接近原生js 2. 按需加载 3. 没有this，降低了耦合性，提高复用性 二 setup（） 1.相当于created生命周期 2.需要 return 返回，在模板中使用 三ref 值类型 响应对象 1 const count = ref(5) 在setup访问count值 count.value 来访问 2可以作为dom引用 const inp = ref(null) ...
Vue3基础+代码语法+例子大全（八）——组合式API
m0_46610349的博客
10-03 2348
什么是组合式 API ？组合式 API 基础：setup 组件选项、带 ref 的响应式变量、在 setup 内注册生命周期钩子、watch 响应式更改、独立的 computed 属性、Setup、生命周期钩子、依赖注入：Provide / Inject。Vue 单文件、单文件组件
Vue3官网-可复用&组合式API（十一）组件式API介绍（官网API ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit）
qq_43456781的博客
09-23 1348
Vue3官网-组合式API（一）组件式API介绍（官网API ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit） 文章目录Vue3官网-组合式API（一）组件式API介绍（==官网API== ref、toRef、toRefs）、Setup（es6解构、props、context、attrs slots emit）1. 组合式API介绍什么是组合式 API？组合式 API 基础`setup` 组件选项带 `ref` 的响应式变量在 `se
Vue 3组合式API打造高效登录系统
资源摘要信息:"实现基于Vue 3组合式API的登录系统" 知识点一：Vue 3 新特性概述 Vue 3 是流行的前端框架 Vue.js 的最新版本，引入了许多改进和新特性。组合式 API（Composition API）是 Vue 3 中引入的一个重要特性...
ArcGIS API for JavaScript
08-04
- **Graphic**：组合了 Geometry 和 Symbol，用于在地图上显示具体的图形元素。 - **Render**：渲染过程决定了地图上的图形如何被显示出来。 - **FeatureSet**：集合了多个 Graphic 对象，常用于存储和操作一组地理...
HTML5 利用Canvas API 组合图形
weixin_34419321的博客
05-06 116
在HTML5中有11种组合图形的方式，只要把他们设置到context.globalCompositeOperation中就可以了，我这里做了一个小例子来证明各种图形组合方式的结果 HTML代码很简单，就2个控件，一个是下拉列表，让用户选择组合方式，并且一旦用户做出了选择，就执行js函数draw(id），从而在第二个控件canvas上根据用户当前选择的组合方式进行画图。第二...
vue3.0之组合API（Composition API）
qq_39085895的博客
12-15 777
vue3.0组合API 一、ref 下面是ref的使用 代码片。 注意：ref只能监听简单类型的变化， 不能监听复杂类型的变化（数组/对象） 复杂类型使用reactive监听，示例： import {reactive} from 'vue'; let s = reactive({a:[]}) //App1.vue <template> <div> <p>{{count}}</p> <input @cli
vue3.0组合API
Cupid
12-14 257
vue3.0组合API Ref Ref是这样的一种数据结构：它有个key为Symbol的属性做类型标识，有个属性value用来存储数据。这个数据可以是任意的类型，唯独不能是被嵌套了Ref类型的类型。 Ref类型的数据，是一种响应式的数据。 Ref写法简单，但也有弊端，它只能监听一些如数字、字符串、布尔之类的简单数据。复杂数据需要用到以后讲的 reactive 。(实际上也可以用 Ref ...
流API--提取流+组合流
weixin_34067102的博客
11-09 119
提取子流和组合流 1，limit（n）会返回一个包含n个元素的新流，如果原始流的长度小于n，则会返回原始的流。这个方法可用来裁剪指定长度的流。 2，skip（n）正好相反，它会丢弃掉前面的n个元素。 3，静态方法，concat()方法将2个流连接在一起。注意一点，第一个流的长度不应该是无限的，不然第2个流永远没有机会被添加到第1个流的后面。 4，findFrist（）返回非空集...
09-组合式API
Burgess_Lee的博客
10-17 946
组合式API相关知识点总结
Vue3.0学习 - 第三节，Vue3 组合api的理解（setup）
csl125的博客
04-14 1526
写一个todolist，大概长这样 vue2.xx 语法 <template> <div> <from> <input type="text" v-model="stu.id"> <input type="text" v-model="stu.name"> <input type="text" v-model="stu.age"> <input type="sub
API整合
caicaizi3的博客
09-02 151
API整合
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只小熊猫呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值