Vue 3 组合式 API 指南:响应式状态管理与跨组件通信

引言

随着 Vue 3 的发布,Vue 引入了一个新的编程范式——组合式 API(Composition API)。这一新特性旨在解决 Options API 在处理复杂逻辑时的一些局限性,并提供了一种更灵活、更可重用的方式来组织和重用代码

组合式 API 基础

setup 函数的概念和作用

在 Vue 组合式 API 中,setup 函数是组件的入口点,它在组件实例被创建时调用,但在任何生命周期钩子之前执行。setup 函数的主要作用是初始化响应式状态、计算属性、方法和侦听器,并将它们暴露给模板和组件的其他部分。

import { ref, reactive, computed, watch } from 'vue';export default {setup() {// 初始化响应式状态和功能return {// 暴露给模板和组件其他部分的响应式状态和功能};}
};
响应式引用 ref 和响应式对象 reactive 的使用方法

在 Vue 3 中,ref 和 reactive 是创建响应式状态的两个主要工具。

  • ref 用于创建单个响应式值,它返回一个响应式的引用对象。当引用的值是基本数据类型时,Vue 会自动将其包装在对象中。
import { ref } from 'vue';export default {setup() {const count = ref(0);// 通过 .value 访问和修改响应式值console.log(count.value); // 输出 0count.value++;console.log(count.value); // 输出 1return {count};}
};
  • reactive 用于创建一个响应式对象。它返回一个响应式的代理对象,该对象的属性访问和修改都是响应式的。(实际上,ref底层就是reactive实现的,实际开发中一般ref用的多)
import { reactive } from 'vue';export default {setup() {const state = reactive({ count: 0 });// 直接访问和修改响应式对象的属性console.log(state.count); // 输出 0state.count++;console.log(state.count); // 输出 1return {state};}
};
使用 computed 和 watch 创建计算属性和侦听器

computed 和 watch 是 Vue 组合式 API 中用于处理计算属性和侦听器的工具。

  • computed 用于创建计算属性,它接受一个 getter 函数,并返回一个只读的响应式引用。
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);// 访问计算属性console.log(doubleCount.value); // 输出 0return {count,doubleCount};}
};
  • watch 用于创建侦听器,它监视一个或多个响应式引用的变化,并在变化时执行一个回调函数。
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});return {count};}
};

provide 和 inject

在 Vue.js 中,provide 和 inject 是两个用于实现跨组件依赖注入的 API。它们允许一个祖先组件定义可供其所有子孙组件使用的数据或方法,而无需通过逐层传递 props 或使用事件发射器。

provide

provide 函数允许你在组件内部提供一个值,这个值可以被其所有子孙组件注入。provide 可以在组件的 setup 函数中使用,也可以在组件的 methodscomputed 或 watch 中使用。

import { provide } from 'vue';export default {setup() {// 提供一个响应式对象const state = reactive({ count: 0 });// 提供一个方法const increment = () => {state.count++;};// 使用 provide 函数提供数据provide('state', state);provide('increment', increment);// ...}
};

在上面的例子中,state 和 increment 方法被提供给所有子孙组件。

inject

inject 函数用于在子孙组件中注入由祖先组件提供的数据或方法。inject 可以在组件的 setup 函数中使用,也可以在组件的 methodscomputed 或 watch 中使用。

import { inject } from 'vue';export default {setup() {// 注入 'state' 和 'increment'const state = inject('state');const increment = inject('increment');// 使用注入的数据和方法console.log(state.count); // 输出 0increment(); // 增加计数// ...}
};

在上面的例子中,state 和 increment 被注入到子孙组件中,并可以像本地数据一样使用。

注意事项

  • provide 和 inject 是成对使用的,只有当祖先组件提供了某个值,子孙组件才能注入这个值。
  • provide 和 inject 提供的值是响应式的,这意味着如果提供的值发生变化,所有注入了这个值的子孙组件都会自动更新。
  • provide 和 inject 可以在组件的任何生命周期钩子中使用,但通常在 setup 函数中使用,以确保在组件初始化时提供和注入值。

通过使用 provide 和 inject,开发者可以更灵活地管理组件之间的依赖关系,特别是在大型应用中,这有助于减少组件之间的耦合度,提高代码的可维护性。

 子孙组件能改动inject注入的值吗

孙组件不能直接修改通过 inject 注入的响应式数据。这是为了保持数据流的清晰和组件之间的独立性,避免潜在的副作用和难以追踪的错误。

然而,如果你确实需要在子孙组件中修改注入的值,你可以通过以下方法实现:

1.使用 ref 或 reactive 提供响应式数据
如果你使用 ref 或 reactive 提供响应式数据,那么子孙组件可以通过 .value 属性来修改这个值。

// 祖先组件
import { provide, reactive } from 'vue';export default {setup() {const state = reactive({ count: 0 });provide('state', state);// ...}
};// 子孙组件
import { inject } from 'vue';export default {setup() {const state = inject('state');// 修改注入的响应式数据state.count++;// ...}
};

2.提供一个方法来修改数据
你可以在祖先组件中提供一个方法,该方法可以修改响应式数据。然后,这个方法可以被子孙组件注入并调用。

// 祖先组件
import { provide } from 'vue';export default {setup() {const state = reactive({ count: 0 });const increment = () => {state.count++;};provide('state', state);provide('increment', increment);// ...}
};// 子孙组件
import { inject } from 'vue';export default {setup() {const increment = inject('increment');// 调用注入的方法来修改数据increment();// ...}
};

3.使用 readonly 创建只读引用
如果你不希望子孙组件修改注入的值,可以使用 readonly 创建一个只读引用。

// 祖先组件
import { provide, reactive, readonly } from 'vue';export default {setup() {const state = reactive({ count: 0 });provide('state', readonly(state));// ...}
};// 子孙组件
import { inject } from 'vue';export default {setup() {const state = inject('state');// 尝试修改注入的值将会失败// state.count = 1; // 这将不会工作// ...}
};

总结

Vue 3 的组合式 API 通过 setup 函数提供响应式状态管理,支持使用 refreactive 创建响应式数据,computedwatch 处理计算属性和侦听器。同时,provideinject 允许跨组件进行依赖注入,实现数据和方法的共享。这些特性提升了代码的组织性、可重用性以及组件间的解耦。

希望这篇文章能帮助到你

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

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

相关文章

YOLOv10改进 | 特殊场景检测篇 | 单阶段盲真实图像去噪网络RIDNet辅助YOLOv10图像去噪(全网独家首发)

一、本文介绍 本文给大家带来的改进机制是单阶段盲真实图像去噪网络RIDNet,RIDNet(Real Image Denoising with Feature Attention)是一个用于真实图像去噪的卷积神经网络(CNN),旨在解决现有去噪方法在处理…

c# 容器变换

List<Tuple<int, double, bool>> 变为List<Tuple<int, bool>>集合 如果您有一个List<Tuple<int, double, bool>>并且您想要将其转换为一个List<Tuple<int, bool>>集合&#xff0c;忽略double值&#xff0c;您可以使用LINQ的S…

卷积神经网络-猫狗识别实战

课程来自bilibiliMomodel平台 全长只有两个小时&#xff0c;理论部分讲得很粗糙 1 人的视觉和计算机视觉 人的大脑&#xff1a;神经元细胞&#xff0c;轴突发送信号&#xff0c;树突接收信号&#xff0c;互相连接&#xff0c;连接的强度和状态会随着新的经历刺激而变化。 用…

server nat表和会话表的作用及NAT地址转换详细

本章节主要讲nat技术的基础 -会话表的建立也是看5元组 -状态检测技术的回包一样也看5元组&#xff0c;但是状态检测技术会看的除开5元组还有更多东西 老哥&#xff0c;你真的应该好好注意一个东西&#xff1a;我们的会话表只是为了后续包的转发&#xff0c;会话表是记录的首…

【机器学习】和【人工智能】在航空航天中的应用

作者主页: 知孤云出岫 目录 引言机器学习和人工智能在航空航天中的应用1. 预测性维护2. 飞行路径优化3. 自动驾驶飞行器 未来展望1. 增强人机协作2. 更智能的空中交通管理3. 高效的航空制造 结论参考文献 引言 随着科技的迅猛发展&#xff0c;机器学习和人工智能&#xff08;…

【python报错已解决】 “Invalid Array Index“

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法&#xff1a;2.1 方法一&#xff1a;检查索引范…

win32:第一个窗口程序-应用程序入口点(part.6)

第一个窗口程序的最后一部分&#xff1a;应用程序入口函数wWinMain&#xff1b;这是Windows应用程序的主函数&#xff0c;负责初始化应用程序、注册窗口类、创建主窗口并进入消息循环处理消息。 int APIENTRY wWinMain(_In_ HINSTANCE hInstance,_In_opt_ HINSTANCE hPrevInst…

pytorch说明

深度学习中的重要概念&#xff1a; 激活函数&#xff1a; 激活函数的必要性&#xff1a;激活函数不是绝对必须的&#xff0c;但在深度学习中&#xff0c;它们几乎总是被使用。激活函数可以引入非线性&#xff0c;这使得神经网络能够学习更复杂的模式。 激活函数的位置&#x…

Linux C++ 053-设计模式之模板方法模式

Linux C 053-设计模式之模板方法模式 本节关键字&#xff1a;Linux、C、设计模式、模板方法模式 相关库函数&#xff1a; 概念 模板方法模式定义了一个算法的步骤&#xff0c;并允许子类别为一个或多个步骤提供其实践方式。让子类别在不改变算法架构的情况下&#xff0c;重新…

用HTML和CSS实现提示工具(tooltip)及HTML元素的定位

所谓提示工具&#xff0c;是指将鼠标移动到某个HTML元素&#xff08;工具&#xff09;时会显示一些提示内容&#xff08;提示文本&#xff09;&#xff0c;而鼠标移出工具元素的范围时提示文本就消失了。考虑到提示文本元素应当在鼠标进入工具元素时显示&#xff0c;鼠标离开工…

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…

Docker 部署 Nginx 并在容器内配置申请免费 SSL 证书

文章目录 dockerdocker-compose.yml申请免费 SSL 证书请求头参数带下划线 docker https://hub.docker.com/_/nginx docker pull nginx:1.27注&#xff1a; 国内网络原因无法下载镜像&#xff0c;nginx 镜像文件下载链接 https://pan.baidu.com/s/1O35cPbx6AHWUJL1v5-REzA?pw…

STM32入门开发操作记录(二)——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…

从零开始实现大语言模型(六):因果注意力机制

1. 前言 因果注意力机制(causal attention)是一种特殊的自注意力机制,其在计算context向量 z i z_i zi​

jenkins系列-01.docker安装jenkins

进入官网&#xff1a;https://www.jenkins.io/ 使用LONG term support版本&#xff1a;2.387.1 docker pull jenkins/jenkins:2.387.1-lts 拉取镜像&#xff1a; 编写docker-compose文件&#xff1a; 启动jenkins: 查看启动日志&#xff1a; 默认生成的密码&#xff1a;…

基于springboot+vue+uniapp的超市购物系统小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

LeetCode 142.环形链表2 C写法

LeetCOde 142.环形链表2 C写法 思路1&#x1f914;&#xff1a; ​ 用环形链表的方法&#xff0c;快慢指针找到slow和fast的相遇点&#xff0c;此时头到入口点的位置与相遇点到入口点的距离一样。 ​ 我们假设头到入口点的长度为L&#xff0c;环的长度为C&#xff0c;相遇点到入…

Rust 测试的组织结构

测试的组织结构 本章一开始就提到&#xff0c;测试是一个复杂的概念&#xff0c;而且不同的开发者也采用不同的技术和组织。Rust 社区倾向于根据测试的两个主要分类来考虑问题&#xff1a;单元测试&#xff08;unit tests&#xff09;与 集成测试&#xff08;integration test…

负荷预测 | Matlab基于Transformer-LSTM多变量时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于Transformer-LSTM多变量时间序列多步预测&#xff1b; 2.多变量时间序列数据集&#xff08;负荷数据集&#xff09;&#xff0c;采用前96*2个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据&#x…

记一次饱经挫折的阿里云ROS部署经历

前言 最近在参加的几个项目测评里&#xff0c;我发现**“一键部署”这功能真心好用&#xff0c;省下了不少宝贵时间和力气&#xff0c;再加上看到阿里云现在有个开源上云**的活动。趁着这波热潮&#xff0c;今天就聊聊怎么从头开始&#xff0c;一步步搞定阿里云的资源编排服务…