Vue.js 中的组合式 API 代表了我们构建和组织组件方式的重大转变。它为传统的选项式 API 提供了一种更灵活、更强大的替代方案，尤其适用于复杂的应用程序。本章将深入探讨组合式 API 的核心概念：setup函数、ref和reactive，为你构建更可维护、更可重用的 Vue 组件打下坚实的基础。我们将探索这些元素如何协同工作，以实现更功能化、更可组合的组件逻辑。

理解 setup 函数

setup 函数是 Vue 组件中使用 Composition API 的入口点。它用于定义响应式数据、计算属性、方法和生命周期钩子。与 Options API 不同，在 Options API 中这些元素定义在组件定义的单独部分中，而 setup 函数允许你以更逻辑和连贯的方式组织它们。

setup 的作用

setup 函数充当组件模板与其底层逻辑之间的桥梁。它在组件创建 之前 执行，并提供对组件的 props 和 context 的访问。setup 函数必须返回一个包含你希望提供给模板的数据、方法和计算属性的对象。

示例：基本的 setup 函数

import { ref } from 'vue';export default {props: {initialCount: {type: Number,default: 0}},setup(props, context) {// 使用“ref”创建一个反应变量const count = ref(props.initialCount);// 定义一个方法来增加计数const increment = () => {count.value++;};// 将反应变量和方法暴露给模板return {count,increment};},template: `<div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>`
};

在这个例子中：

  • 我们从 Vue 导入 ref 函数。
  • setup 函数接收 props 和 context 作为参数。
  • 我们使用 ref 创建一个响应式变量 count，并使用 initialCount prop 的值进行初始化。
  • 我们定义一个方法 increment，用于增加 count 的值。注意，我们通过 .value 访问 ref 的值。
  • 我们返回一个包含 count 和 increment 的对象，使其在模板中可用。
  • 模板显示 count 的当前值，并提供一个按钮来增加它。

setup 参数：props 和 context

setup 函数接收两个参数：

  • props: 一个包含组件属性的对象。需要注意的是，props 对象是响应式的。如果父组件更新了属性，setup 中的 props 对象将自动更新。
  • context: 一个提供访问组件上下文的对象。它暴露了三个属性：
    • attrs: 一个包含组件非属性属性的对象（相当于 Options API 中的 $attrs）。
    • slots: 一个包含组件插槽的对象（相当于 Options API 中的 $slots）。
    • emit: 一个允许你从组件中发出自定义事件的函数（在选项 API 中相当于 $emit）。

示例：使用 context.emit

import { ref } from 'vue';export default {setup(props, context) {const count = ref(0);const increment = () => {count.value++;// Emit a custom event when the count is incrementedcontext.emit('increment', count.value);};return {count,increment};},template: `<div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>`
};

在这个例子中，我们使用 context.emit 来在每次调用 increment 方法时发出一个名为 increment 的自定义事件。事件负载是 count 的新值。

ref: 创建响应式引用

ref 函数是 Composition API 的核心部分。它允许你创建对基本值（数字、字符串、布尔值）和复杂数据类型（对象、数组）的响应式引用。当 ref 的值发生变化时，Vue 会自动更新 DOM 以反映新值。

如何 ref 工作

ref 函数接受一个参数：引用的初始值。它返回一个具有 .value 属性的对象，该属性保存当前值。访问或修改 ref 的值需要使用 .value 属性。

示例：使用 ref 与原始值

import { ref } from 'vue';export default {setup() {const message = ref('Hello, Vue!');const updateMessage = () => {message.value = 'Goodbye, Vue!';};return {message,updateMessage};},template: `<div><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div>`
};

在这个例子中：

  • 我们创建一个名为 ref 的 message，初始值为"Hello, Vue!"。
  • 我们定义一个名为 updateMessage 的方法，该方法将 message 的值更改为"Goodbye, Vue!"。
  • 模板显示 message 的当前值。当按钮被点击时，updateMessage 被调用，模板会自动更新以显示新消息。

示例：使用 ref 与复杂数据类型

import { ref } from 'vue';export default {setup() {const user = ref({name: 'John Doe',age: 30});const updateUser = () => {user.value.name = 'Jane Doe';user.value.age = 25;};return {user,updateUser};},template: `<div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p><button @click="updateUser">Update User</button></div>`
};

在这个例子中：

  • 我们创建一个名为 ref 的 user 引用，其初始值是一个包含 name 和 age 属性的对象。
  • 我们定义一个名为 updateUser 的方法，用于更新 user 对象中的 name 和 age 属性。
  • 模板显示 user 对象的 name 和 age 属性。当按钮被点击时，调用 updateUser，模板会自动更新以显示新的用户信息。

何时使用 ref

使用 ref 当你需要创建一个单一值的响应式引用，无论是基本类型还是复杂的数据类型。当你需要跟踪组件中单个值的变化时，它特别有用。

reactive: 创建响应式对象

reactive 函数是 Composition API 的另一个重要部分。它允许你创建响应式对象。与 ref 不同，ref 创建一个值的响应式 引用 ，reactive 创建一个响应式的 对象 。响应式对象属性的变化会被 Vue 自动跟踪，并且 DOM 会相应更新。

reactive 的工作原理

reactive 函数接受一个普通的 JavaScript 对象作为参数，并返回该对象的响应式代理。然后你可以直接访问和修改响应式对象的属性，而无需像使用 ref 那样使用 .value 属性。

示例：使用 reactive

import { reactive } from 'vue';export default {setup() {const state = reactive({name: 'John Doe',age: 30});const updateState = () => {state.name = 'Jane Doe';state.age = 25;};return {state,updateState};},template: `<div><p>Name: {{ state.name }}</p><p>Age: {{ state.age }}</p><button @click="updateState">Update State</button></div>`
};

在这个例子中：

  • 我们使用 reactive 函数创建一个响应式对象 state。
  • 我们定义一个方法 updateState，用于更新 state 对象的 name 和 age 属性。
  • 模板显示 state 对象的 name 和 age 属性。当按钮被点击时，调用 updateState，模板会自动更新以显示新的状态信息。

深度响应式

reactive 函数提供深度响应式功能。这意味着在响应式对象中的嵌套属性的变化也会被 Vue 跟踪。

示例：深度响应式

import { reactive } from 'vue';export default {setup() {const state = reactive({user: {name: 'John Doe',address: {city: 'New York'}}});const updateCity = () => {state.user.address.city = 'Los Angeles';};return {state,updateCity};},template: `<div><p>Name: {{ state.user.name }}</p><p>City: {{ state.user.address.city }}</p><button @click="updateCity">Update City</button></div>`
};

在这个例子中，即使 city 是 state 对象中的嵌套属性，对它的修改仍然会被 Vue 追踪，并且模板会相应地更新。

reactive 的局限性

  • 仅适用于对象： reactive 函数仅适用于普通的 JavaScript 对象。它不能用于数字、字符串或布尔值等原始值。对于这些值，你应该使用 ref。

  • 重新赋值导致的响应性丢失： 如果你重新赋值一个响应式对象，你会丢失响应性。例如：

    import { reactive } from 'vue';export default {setup() {const state = reactive({ count: 0 });const resetState = () => {// Reactivity is lost here!state = { count: 0 };};return { state, resetState };},template: '<button @click="resetState">Reset</button>'
};

    在这种情况下，state 在重新赋值后不再具有响应性。为了避免这种情况，始终修改响应式对象的属性，而不是重新赋值对象本身。

何时使用 reactive

当你需要创建具有多个属性的反应式对象时，使用 reactive。当你有一个复杂的数据结构需要追踪变化时，它特别有用。

ref 与 reactive：选择合适的工具

ref 和 reactive 都用于在 Composition API 中创建反应式数据，但它们有不同的使用场景。以下是它们的主要区别总结：

特性refreactive
数据类型可与原始类型和对象一起使用仅适用于对象
访问值使用 .value 来访问/修改直接访问/修改属性
响应性创建一个响应式_引用_创建一个响应式_对象_
用例单个值、基本类型具有多个属性的对象

一般来说，使用 ref 表示单个值和基本类型，使用 reactive 表示具有多个属性的对象。

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

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Golang玩转MCP】-实现一个加减乘除MCP服务

【Golang玩转MCP】-实现一个加减乘除MCP服务

文章目录 概要1 首先创建一个MCP服务器2 添加MCP工具如何测试我们的MCP服务功能是否正常呢小结 概要 今天我们使用golang简单实现一个加减乘除MCP服务 1 首先创建一个MCP服务器 s : server.NewMCPServer("Hello World Server","1.0.0",server.WithToolCa…
阅读更多...
计算机网络期末 网络基础概述

计算机网络期末 网络基础概述

目录 网络的定义历史发展(了解) 网络的分类&#xff0c;功能和应用(熟悉) 网络的组成与结构(理解) 网络的 OSI 七层参考模型(熟悉) 网络的 TCP/IP 四次模型(理解) 网络有关性能指标(掌握) 网络的定义历史发展(了解) 计算机网络是什么 四个阶段 总结 网络 互连网 因特网的…
阅读更多...
SwiftUI学习笔记day4: Lecture 4 | Stanford CS193p 2023

SwiftUI学习笔记day4: Lecture 4 | Stanford CS193p 2023

Lecture 4 | Stanford CS193p 2023 课程链接&#xff1a;https://www.youtube.com/watch?v4CkEVfdqjLw 代码仓库&#xff1a;iOS 课程大纲&#xff1a; 简要课程大纲&#xff1a;SwiftUI 高级主题 Swift 访问控制&#xff08;Access Control&#xff09; 5 个级别&#xff1…
阅读更多...
Docker 高级管理——容器通信技术与数据持久化

Docker 高级管理——容器通信技术与数据持久化

目录 一、Docker 容器的网络模式 1. Bridge 模式 2. Host 模式 3. Container 模式 4. None 模式 5. Overlay 模式 6. Macvlan 模式 7. 自定义网络模式 二、端口映射 1. 端口映射 2. 随机映射端口 3. 指定映射端口 &#xff08;1&#xff09;固定端口 &#xff08;…
阅读更多...
git操作案例 -设置远程分支，并提交到新远程新分支

git操作案例 -设置远程分支，并提交到新远程新分支

文章目录 前言一、分析当前的问题二、修改远程仓库地址&#xff08;一&#xff09;修改远程仓库地址场景 现有保留远程分支场景替换现有远程分支 二、 找回已经提交的文件场景&#xff1a;提交后&#xff0c;代码在本地仓库但未推送 三、同步远程分支四、提交到新远程的新分支 …
阅读更多...
mysql一张表，其中一个字段设置了唯一索引，又设置了普通索引，查询的时候很慢，没有走普通索引，是const

mysql一张表，其中一个字段设置了唯一索引，又设置了普通索引，查询的时候很慢，没有走普通索引，是const

问题分析 在 MySQL 中&#xff0c;当一个字段同时存在唯一索引和普通索引时&#xff0c;查询优化器通常会优先选择最严格的索引&#xff08;即能最快缩小结果集的索引&#xff09;。在你的场景中&#xff0c;优化器选择了唯一索引并将查询视为const类型&#xff0c;这通常是高…
阅读更多...
ARCGIS国土超级工具集1.6更新说明

ARCGIS国土超级工具集1.6更新说明

ARCGIS国土超级工具集V1.6版本&#xff0c;功能已增加至60 个。本次更新在V1.5版本的基础上&#xff0c;除修复了使用时发现的若干小问题外&#xff0c;还更新及新增了若干工具。其中勘测定界工具栏更新了界址点西北角重排工具&#xff0c;新增了提示图斑起始点、指定图斑起始点…
阅读更多...
零基础学习RabbitMQ(2)--Linux安装RabbitMQ

零基础学习RabbitMQ(2)--Linux安装RabbitMQ

注意&#xff1a;这里使用的是ubuntu系统 1. 安装Erlang RabbitMQ需要Erlang语言的支持&#xff0c;在安装rabbitMQ之前需要安装Erlang #更新软件包 sudo apt-get update #安装erlang sudo apt-get install erlang 安装后输入 rel可查看Erlang版本&#xff1a; 输入halt().…
阅读更多...
Centos进单用户模式

Centos进单用户模式

一、开机按E 二、修改里面的linux行 把ro 修改成rw init/sysroot/bin/sh 修改前&#xff1a; 修改后&#xff1a; 三、ctrl x退出&#xff0c;进入单用户模式
阅读更多...
RabbitMQ 的工作流程

RabbitMQ 的工作流程

RabbitMQ 是一个消息中间件&#xff0c;实现了生产者消费者模型&#xff0c;可以用来接收、存储、转发消息。 专有名词介绍 要了解 RabbitMQ 的工作流程&#xff0c;我们需要先了解下面几个关键词&#xff1a; 1、Producer 生产者&#xff0c;即向 RabbitMQ 发送消息。 2…
阅读更多...
HTTP——不同版本区别

HTTP——不同版本区别

目录 HTTP1.0和HTTP1.1的区别 HTTP1.1相比HTTP1.0性能上的改进&#xff1a; 但是HTTP1.1还是有性能瓶颈&#xff1a; HTTP/2做了什么优化&#xff1f; HTTP/3的优点 HTTP与HTTPS的区别 HTTPS的工作原理 1.ClientHello 2.ServerHello 3.客户端回应 4.服务器的最后回应…
阅读更多...
关于M0+芯片的IAP应用导致延时不准确解释

关于M0+芯片的IAP应用导致延时不准确解释

前言&#xff1a;在给项目中使用的M0芯片做IAP功能时一切一切都是那么的自然水到渠成&#xff0c;但是笔者在实现完IAP功能后&#xff0c;却发现APP端挂载的单总线功能崩溃了&#xff0c;最开始没有怀疑是bootload导致的。因为笔者在使用同一篇代码的时候单总线挂载的设备不同&…
阅读更多...
安卓登录学习笔记

安卓登录学习笔记

1. 背景与目标 (Background and Goal) 背景: 我们要创建一个用户登录界面。用户输入用户名和密码&#xff0c;点击“登录”按钮。应用会显示一个加载中的“圈圈”&#xff08;ProgressBar&#xff09;&#xff0c;然后模拟一个耗时2秒的网络请求。根据请求结果&#xff0c;界面…
阅读更多...
Git(三)：分支管理

Git(三)：分支管理

文章目录 Git(三)&#xff1a;分支管理理解分支创建分支切换分支合并分支删除分支合并冲突分支管理策略分支策略Bug分支删除临时分支 Git(三)&#xff1a;分支管理 理解分支 本章介绍Git的杀手级功能之一&#xff1a;分支 分支就 是科幻电影里面的平行宇宙&#xff0c;当你正…
阅读更多...
电子电气架构 --- 电气架构基础（汽车电子）

电子电气架构 --- 电气架构基础（汽车电子）

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…
阅读更多...
RestClient 功能介绍、完整使用示例演示， 和RestTemplate、WebClient 对比

RestClient 功能介绍、完整使用示例演示， 和RestTemplate、WebClient 对比

RestClient功能介绍 RestClient是Spring Framework 6.1版本引入的同步HTTP客户端&#xff0c;旨在替代老旧的RestTemplate&#xff0c;提供更现代、流畅的API设计。其核心特点包括&#xff1a; 流畅API&#xff08;Fluent API&#xff09;&#xff1a; 支持链式调用&#xff0…
阅读更多...
VM经常遇见的运行慢几种情况、以及设置方法

VM经常遇见的运行慢几种情况、以及设置方法

大家好，我是东哥说-MES 启动虚拟机是提示如下内容 “无法打开内核设备“\.\VMCIDev\VMX”: 操作成功完成。是否在安装 VMware Workstation 后重新引导? 模块“DevicePowerOn”启动失败。 未能启动虚拟机。” 2.用记事本打开安装目录下TIA Portal STEP7 Prof Safety WinCC …
阅读更多...
【C++语法】类和对象（4）——日期类和const成员函数

【C++语法】类和对象（4）——日期类和const成员函数

6.类和对象&#xff08;4&#xff09; 文章目录 6.类和对象&#xff08;4&#xff09;回顾简单日期类的实现代码补充&#xff1a;前置与后置的重载区别补充&#xff1a;关于流插入运算符&#xff08;<<&#xff09;的解释拓展&#xff1a;仿照流插入操作符(<<)的作…
阅读更多...
当凌晨的键盘声，遇见黎明的星光​

当凌晨的键盘声，遇见黎明的星光​

地铁玻璃映出你困倦的脸&#xff0c;耳机里的音乐循环到第 17 遍&#xff0c;早高峰的人群像沙丁鱼罐头般挤压着你。这是你每天雷打不动的三小时通勤路&#xff0c;从城市边缘到写字楼林立的 CBD&#xff0c;窗外的风景换了四季&#xff0c;而你始终困在摇晃的车厢里&#xff0…
阅读更多...
Web Worker技术详解与应用场景

Web Worker技术详解与应用场景

我们来详细探讨一下 Web Worker。它是现代 Web 开发中解决 JavaScript 单线程限制、提升应用性能和响应能力的关键技术。 核心问题&#xff1a;JavaScript 的单线程模型 浏览器 UI 线程&#xff08;主线程&#xff09;&#xff1a;JavaScript 在浏览器中默认运行在单个线程&a…
阅读更多...
最新文章

Copyright @ 2022~2023