Vue 3.0 组合式API Setup

文章目录

  • 前言
  • 参数
  • Props
  • 上下文
  • 访问组件的 property
  • 结合模板使用
  • 使用渲染函数
  • 使用 this
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:vue.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

参数

使用 setup 函数时,它将接受两个参数:

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

Props

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

// MyBook.vueexport default {props: {title: String},setup(props) {console.log(props.title)}
}

WARNING

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

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

// MyBook.vueimport { toRefs } from 'vue'setup(props) {const { title } = toRefs(props)console.log(title.value)
}

上下文

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

// MyBook.vueexport 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 }) {...}
}

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

访问组件的 property

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

  • props
  • attrs
  • slots
  • emit

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

  • data
  • computed
  • methods

结合模板使用

如果 setup 返回一个对象,则可以在组件的模板中像传递给 setup 的 props property 一样访问该对象的 property:

<!-- MyBook.vue -->
<template><div>{{ readersNumber }} {{ book.title }}</div>
</template><script>import { ref, reactive } from 'vue'export default {setup() {const readersNumber = ref(0)const book = reactive({ title: 'Vue 3 Guide' })// expose to templatereturn {readersNumber,book}}}
</script>

注意,从 setup 返回的 refs 在模板中访问时是被自动解开的,因此不应在模板中使用 .value。

使用渲染函数

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

// MyBook.vueimport { h, ref, reactive } from 'vue'export default {setup() {const readersNumber = ref(0)const book = reactive({ title: 'Vue 3 Guide' })// Please note that we need to explicitly expose ref value herereturn () => h('div', [readersNumber.value, book.title])}
}

使用 this

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

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/189333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用WalletConnect Web3Modal v3 链接钱包基础教程

我使用的是vueethers 官方文档&#xff1a;WalletConnect 1.安装 yarn add web3modal/ethers ethers 或者 npm install web3modal/ethers ethers2.引用 新建一个js文件&#xff0c;在main.js中引入&#xff0c;初始化配置sdk import {createWeb3Modal,defaultConfig, } from…

CMMI认证含金量高吗

一、CMMI认证含金量解答 CMMI&#xff0c;即能力成熟度模型集成&#xff0c;是由美国卡内基梅隆大学软件工程研究所开发的一种评估企业软件开发过程成熟度的模型。CMMI认证的含金量究竟高不高呢&#xff1f;答案是肯定的。CMMI认证被誉为软件开发行业的“金牌标准”&#xff0…

【算法】合并K个升序链表

这道题主要考察的是归并排序&#xff0c;因为已经升序过了&#xff0c;更好理解了。 当然也可以采用分治的思路&#xff1b;或采用最小堆的思路&#xff1b;面试中校招同学写出一种即可&#xff0c;如果能全概览讲一下&#xff0c;就更加分了。 #############################…

力扣题:字符的统计-12.2

力扣题-12.2 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;423. 从英文中重建数字 解题思想&#xff1a;有的单词通过一个字母就可以确定&#xff0c;依次确定即可 class Solution(object):def originalDigits(self, s):""":typ…

okhttp系列-拦截器的执行顺序

1.将拦截器添加到ArrayList final class RealCall implements Call {Response getResponseWithInterceptorChain() throws IOException {//将Interceptor添加到ArrayListList<Interceptor> interceptors new ArrayList<>();interceptors.addAll(client.intercept…

03-IDEA集成Git,初始化本地库,添加远程仓库,提交,拉取,推送,分支的快捷操作

IDEA集成Git 创建Git忽略文件 不同的IDE开发工具有不同的特点文件,这些文件与项目的实际功能无关且不参与服务器上的部署运行, 把它们忽略掉能够屏蔽之间的差异 局部忽略配置文件: 在本地仓库的根目录即项目根目录下直接创建.gitignore文件, 以文件后缀或目录名的方式忽略指定…

双远心镜头:让视觉检测更精准、高效!

工业镜头是视觉系统中的重要组件&#xff0c;工业镜头的选型影响着整个系统的成像效果。在做视觉检测时&#xff0c;会遇到无法检测空间物体、无法控制视场变化、无法控制图像扭曲、对比度低、畸变大、反光等问题&#xff0c;这时普通的工业镜头并不能有效地解决问题&#xff0…

校园门禁可视化系统解决方案

随着科技的持续进步&#xff0c;数字化校园在教育领域中的地位日益上升&#xff0c;各种智能门禁、安防摄像头等已遍布校园各个地方&#xff0c;为师生提供安全便捷的通行体验。然而数据收集分散、缺乏管理、分析困难等问题也逐渐出现&#xff0c;在这个数字化环境中&#xff0…

《opencv实用探索·六》简单理解图像膨胀

1、图像膨胀原理简单理解 膨胀是形态学最基本的操作&#xff0c;都是针对白色部分&#xff08;高亮部分&#xff09;而言的。膨胀就是使图像中高亮部分扩张&#xff0c;效果图拥有比原图更大的高亮区域。 2、图像膨胀的作用 注意一般情况下图像膨胀和腐蚀是联合使用的。 &…

scrapy介绍,并创建第一个项目

一、scrapy简介 scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。 Scrapy 使用了Twisted异步网络框架&#xff0c;可以加快我们的下载速度。 Scrapy文档地址&#xff1a;http://scrapy-chs.readthedocs.io/z…

【.net core 7】新建net core web api并引入日志、处理请求跨域以及发布

效果图&#xff1a; 1.新建.net core web api项目 选择src文件夹》添加》新建项目 输入框搜索&#xff1a;web api 》选择ASP.NET Core Web API 输入项目名称、选择位置为项目的 src文件夹下 我的项目是net 7.0版本&#xff0c;实际选择请看自己的项目规划 2.处理Progr…

基于SpringBoot自定义线程池实现多线程执行方法,以及多线程之间的协调和同步

前言 在服务端开发中&#xff0c;多线程开发是非常重要的。因为多线程可以同时处理多个请求&#xff0c;从而提高应用程序的性能&#xff0c;大大改善用户体验。 一、先来了解三个问题 1.在SpringBoot项目中为啥需要自定义线程池&#xff1f; &#xff08;1&#xff09;在S…

正则表达式的基本语法

1.正则表达式基本语法 两个特殊的符号^和$。他们的作用是分别指出一个字符串的开始和结束。例子如下&#xff1a; "^The"&#xff1a;表示所有以"The"开始的字符串&#xff08;"There"&#xff0c;"The cat"等&#xff09;&#xff1…

SpringBoot Bean解析

Bean解析 IOC介绍 松耦合灵活性可维护 注解方式配置Bean 实现方式1: Component声明,直接类上进行添加注解, 同时保证包扫描能扫到即可实现方式2: 配置类中使用Bean Configuration public class BeanConfiguration implements SuperConfiguration{Bean("dog")Ani…

基于DigiThread的仿真模型调参功能

仿真模型调参是指通过调整模型内部的参数值&#xff0c;使仿真模型的输出更符合实际系统的行为或者预期结果的过程。 仿真过程中&#xff0c;往往需要频繁对模型参数进行调整&#xff0c;通过观察不同参数下系统整体的运行情况&#xff0c;实现系统的性能、可靠性和效率的优化…

一小时玩转【负载均衡】

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…

搜索与回溯算法③

题目&#xff1a; 求0-9所有数字组成的k位不重复的数字。 说明&#xff1a;我们要找到所有不重复数字的k位组合。这个问题相对于前一个问题&#xff08;搜索与回溯算法②&#xff09;增加了一个约束&#xff1a;每个数字只能使用一次。这就需要在代码中加入剪枝逻辑来确保不…

初中数学网上考试系统的设计与实现

摘 要&#xff1a; 科技在人类的历史长流中愈洗愈精&#xff0c;不仅包括人们日常的生活起居&#xff0c;甚至还包括了考试的变化。之前的考试需要大量的时间和精力&#xff0c;组织者还需要挑选并考查结果&#xff0c;以及为了强制有效地进行考试所需要采取的一些步骤&#x…

RocketMQ Copilot 一款面向 Apache RocketMQ 的智能辅助运维系统

一、RocketMQ简介 ocketMQ是阿里巴巴研发的一款分布式消息中间件&#xff0c;后开源给Apache基金会&#xff0c;成为apache的顶级开源项目。它具有高性能、高可靠、高实时和分布式的特点。RocketMQ主要应用于解决应用耦合&#xff0c;消息分发&#xff0c;流量削锋等问题。 R…

flutter布局详解及代码示例(补充)

布局 基本布局 Container&#xff08;基本布局&#xff09;&#xff1a;最常见widgetPadding&#xff08;内边距布局&#xff09;&#xff1a;Container增加padding的布局Center&#xff08;居中布局&#xff09;&#xff1a;Container设置居中的布局Align&#xff08;对齐布…