Vue3从零开始——掌握setup、ref和reactive函数的奥秘

news2024/9/25 11:15:55

文章目录

    • 一、Vue 3 组合式 API 概述
    • 二、`setup`​ 函数的基本使用
      • 2.1 `setup`​ 函数的特点
      • 2.2 `setup`​ 函数的基本结构
      • 2.3 实现一个简单的小demo
    • 三、`ref`​ 函数的功能和应用
      • 3.1 `ref`​函数介绍
      • 3.2 基本使用
        • 3.2.1 定义`ref`​数据
        • 3.2.2 修改响应式变量
      • 3.3 使用`ref`​函数实现计数器
    • 四、`reactive`​ 函数的功能和应用
      • 4.1 `reactive`​ 函数介绍
      • 4.2 基本使用
      • 4.3 使用`reactive`​函数实现计数器
      • 4.4 `reactive`​函数的的局限性
    • 五、`ref`​ 与 `reactive`​ 的区别
      • 5.1 主要区别
      • 5.2 `ref`​ 适合的场景
      • 5.3 `reactive`​ 适合的场景
      • 5.4 Vue社区观点
    • 六、总结

在这里插入图片描述

一、Vue 3 组合式 API 概述

下载 (14)

在 Vue 3 中，引入了组合式 API（Composition API） ，这使得开发者可以更灵活地组织代码逻辑，并提升了组件的复用性和可维护性。相比于 Vue 2 中的选项式 API，组合式 API 提供了一种更具功能性的方式来构建应用。

主要优点：

  • 逻辑复用和组织：通过组合函数可以更清晰地组织代码逻辑，避免在生命周期函数中写大量逻辑。
  • 更好的 TypeScript 支持：组合式 API 天然地支持 TypeScript，这使得类型推断和类型检查变得更加轻松。
  • 性能优化：组合式 API 的实现方式在某些场景下可以带来性能上的提升。

二、setup​ 函数的基本使用

setup​ 函数是 Vue 3 组件中使用组合式 API 的起点，它是一个新增加的组件选项，所有的组合式 API 的逻辑都需要在这个函数中书写。

2.1 setup​ 函数的特点

  • 从组件生命周期来看，在beforeCreate​之前调用，因此它没有 this​ 绑定。
  • 函数中 this​ 不是组件实例，是 undefined​。
  • 返回一个对象，该对象将被合并到组件的 data​ 中，可以在模板中直接使用。

2.2 setup​ 函数的基本结构

<template>
  <div>
    <!-- 绑定在模板中的变量和方法 -->
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    // 在这里定义响应式变量和方法

    return {
      // 返回需要在模板中使用的变量和方法
    };
  },
};
</script>

<style scoped>
/* 样式部分 */
</style>

2.3 实现一个简单的小demo

<template>
    <div>
        <p @click="show()">{{ msg }}</p>
    </div>
</template>

<script>

export default {
    setup() {
        console.log("setup 函数执行了");

        let msg = 'Hello World';

        function show(){
            console.log("show 函数执行了");
        }

        // 返回定义的变量和函数
        return {
            msg,
            show
        };
    },
    beforeCreate() {
        console.log("beforeCreate 函数执行了");
    },
};
</script>

<style scoped>
button {
    margin: 5px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}


p {
    font-size: 18px;
}
</style>

image​

三、ref​ 函数的功能和应用

3.1 ref​函数介绍

ref​ 函数用于创建一个持有单个值的响应式引用。它适用于基本数据类型（如字符串、数字、布尔值）和不需要深度响应的数据结构。通过 ref​ 函数，我们可以在 Vue 组件中创建简单的响应式数据。

主要特点：

  • 基本类型响应性：为基本数据类型创建响应式状态。
  • 引用式访问：通过 .value​ 属性访问和修改值。
  • 适用于 DOM 引用：可以用于 DOM 元素的引用。

3.2 基本使用

3.2.1 定义ref​数据
import { ref } from 'vue';

export default {
  setup() {
	// 创建响应式数据
	const count = ref(0); 
    const message = ref('Hello, Vue 3!');
    const isVisible = ref(true);
  
    return {
	  count,
      message,
      isVisible,
    };
  },
};
3.2.2 修改响应式变量

要修改 ref​ 创建的响应式变量，需要使用 .value​ 属性：

count.value++; // 增加 count
count.value = 10; // 设置 count 的值

注意：当在Vue的模板（template​）中使用时，ref​ 的值可以直接使用，无需显式调用 .value​：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

3.3 使用ref​函数实现计数器

应用需求：

  • 显示当前计数。
  • 提供按钮增加计数。
  • 提供按钮重置计数。
<template>
    <div>
        <p>当前计数：{{ count }}</p>
        <button @click="increment">增加</button>
        <button @click="reset">重置</button>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        console.log("setup 函数执行了");

        // 创建一个响应式对象
        const count = ref(0);

        // 增加计数
        function increment() {
            count.value++;
            console.log("count = " + count.value);
          
        }

        // 重置计数
        function reset() {
            count.value = 0;
        }

        return {
            count,
            increment,
            reset,
        };
    },
    beforeCreate() {
        console.log("beforeCreate 函数执行了");
    },
};
</script>

<style scoped>
button {
    margin: 5px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}


p {
    font-size: 18px;
}
</style>

代码解读：

  1. 创建响应式变量：
    • 使用 ref 创建一个响应式变量 count实现记录数字。ref(0) 表示将初始值设置为 0。
  2. 定义方法：
    • increment 方法：用于增加计数值。在函数内部，通过 count.value++ 来递增计数器，并在控制台中输出新的计数值。
    • reset 方法：用于重置计数值。将 count.value 设为 0 来重置计数器。
  3. 组件返回：
    • return：返回 count 和方法 increment、reset，使其在模板中可以直接访问，这一步非常重要！！
  4. 模板绑定：
    • {{ count }}：在模板中使用双花括号语法绑定 count，动态显示当前计数值。
    • @click ：绑定 button 元素的点击事件到 increment 和 reset 函数上，实现按钮点击后对计数值的增加和重置。
  5. 生命周期钩子：
    • beforeCreate：输出消息以便于理解setup函数的执行顺序。

image​

四、reactive​ 函数的功能和应用

4.1 reactive​ 函数介绍

reactive​ 是 Vue 3 提供的一个 API，用于创建深度响应式对象。与 ref​ 不同，ref​ 适用于基本数据类型，而 reactive​ 更适用于对象、数组等复杂数据结构。

主要特点：

  • 创建深度响应式的数据对象。
  • 自动跟踪依赖变化并更新视图。
  • 可以结合 toRefs​ 解构成多个响应式引用。

4.2 基本使用

import { reactive } from 'vue';

export default {
  setup() {
    // 创建响应式对象
    const state = reactive({
      count: 0,
      message: 'Hello, Vue 3!',
    });

    // 方法示例
    function increment() {
      state.count++;
    }

    return {
      state,
      increment,
    };
  },
};

在上面的代码中，我们使用 reactive​ 创建了一个响应式对象 state​，其中包含了两个属性：count​ 和 message​。increment​ 函数可以用来增加 count​ 的值。

‍

4.3 使用reactive​函数实现计数器

应用需求：

  • 显示当前计数。
  • 提供按钮增加计数。
  • 提供按钮重置计数。
<template>
  <div>
    <h1>{{ state.title }}</h1>
    <p>当前计数：{{ state.count }}</p>
    <button @click="increment">增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 创建一个响应式对象
    const state = reactive({
      count: 0,
      title: '计数器应用',
    });

    // 增加计数
    function increment() {
      state.count++;
    }

    // 重置计数
    function reset() {
      state.count = 0;
    }
	// 暴露定义的数据和函数
    return {
      state,
      increment,
      reset,
    };
  },
};
</script>

<style scoped>
button {
  margin: 5px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

h1 {
  color: #333;
}

p {
  font-size: 18px;
}
</style>

代码解读：

跟前面的其实差不多，只不过用法上有一点区别，其他其实差别并不大。

  1. 创建响应式变量：使用 ref 创建两个响应式变量 count 和 title。
  2. 定义方法：定义 increment 和 decrement 函数，用于增加和减少计数。
  3. 模板绑定：在模板中使用 {{ }} 绑定响应式变量，并通过 @click 指令绑定事件处理函数。

image​

4.4 reactive​函数的的局限性

参考自：https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive

reactive()​ API 有一些局限性：

  1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map​、Set​ 这样的集合类型)。它不能持有如 string​、number​ 或 boolean​ 这样的原始类型。

  2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
    js

    let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })

  3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：
    js

    const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

由于这些限制，我们建议使用 ref()​ 作为声明响应式状态的主要 API。

五、ref​ 与 reactive​ 的区别

Vue 3 提供了两种创建响应式数据的方式：ref​ 和 reactive​。它们在功能上有一些不同，适用于不同的场景。

5.1 主要区别

特性​ref​​reactive​
用途创建持有基本类型值的响应式引用创建深度响应式对象，适合复杂数据结构
访问方式通过.value​访问和修改直接访问和修改对象的属性
响应性基本类型响应性深度响应性，自动追踪对象属性的变化
适用场景适用于简单的状态和需要 DOM 引用的场景适用于多属性对象、数组、复杂数据结构
数据类型支持
只对 object 类型有效对任意类型有效
使用方式在 <script>​ 和 <template>​ 中无差别使用在 <script>​ 和 <template>​ 使用方式不同

5.2 ref​ 适合的场景

  • 用于基本类型或需要独立响应式的变量。适合处理简单的数据类型，如 Number​、String​、Boolean​。
  • 独立的响应式变量：需要单独处理或跟踪的变量。
  • DOM 元素引用：通过 ref​ 获取和操作 DOM 元素。

5.3 reactive​ 适合的场景

  • 用于复杂的数据结构，如对象或数组。适合处理多属性的对象或需要整个结构响应式的数据。
  • 深度响应：需要自动跟踪嵌套属性变化的数据。

5.4 Vue社区观点

默认都使用 ​ref​​ ，当需要分组时使用 ​reactive​​ 。

详细原因可以看：Ref vs. Reactive — Which is Best? | Michael Thiessen

‍

六、总结

本文主要讲述了 Vue 3 中的 setup​ 函数、ref​函数和 reactive​ 函数的一些基本知识，他们的基本使用语法和如何简单运用实现一个小demo，希望对大家有所帮助☺️。

‍

参考文章：

Ref vs. Reactive — Which is Best? | Michael Thiessen

【译】Ref vs. Reactive：使用Vue3组合式API该如何选择？

响应式基础 | Vue.js

‍

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CTFHUB-web-RCE-过滤空格

CTFHUB-web-RCE-过滤空格

开启题目 在 URL 后面拼接使用管道符执行注入&#xff0c;发现了 flag 的可疑文件 127.0.0.1|ls 因为这题过滤了空格&#xff0c;如果在 URL 中输入空格&#xff0c;则不会执行 ping 命令。那么这里将空格替换为 %09 &#xff0c;也就是 ASCII 的 Tab 键。右键检查网页源代码发…
阅读更多...
【OpenCV-Python实战项目】01-OCR文本检测

【OpenCV-Python实战项目】01-OCR文本检测

OpenCVTesseract文本检测 0.介绍1.基础功能实现1.1 字符检测1.2 单词检测1.3 只检测数字 2.工程应用2.1 封装类2.2 屏幕截图识别2.3 视频文本检测&#xff08;待优化&#xff09; 3.参考 0.介绍 &#xff08;1&#xff09;Tesseract是一个开源文本识别 (OCR)引擎&#xff0c;是…
阅读更多...
TypeScript数组

TypeScript数组

数组 数组 数据存储的集合 声明数组的两种方式 1.只声明不赋值 &#xff1a;let arr1:string[] <>泛型 数组在使用前先赋值 2.边声明边赋值 let arr3:string[][];//空数组 // [数据1,数据2,.....数据n]数据之间用,隔开 let arr4:string[][张三,李四,王五]; let ar…
阅读更多...
A. Array

A. Array

https://codeforces.com/gym/102875/problem/A p<30 可以建立30颗线段树维护 然后看操作 一.add 懒标记 二.mul 三.mi 好像不能找到 于是懒标记貌似不能做&#xff0c; 但是考虑结果都要mod p,所以数都在0-p之间 其实就是i-> (操作)%p的映射 那就不用维护别的标…
阅读更多...
MySQL —— 约束

MySQL —— 约束

MySQL —— 约束 引言not nulluniqueprimary key —— 主键auto_increment复合主键 foreign key —— 外键插入数据删除主表的数据 default 引言 在设计表的时候&#xff0c;有些列是必填项&#xff08;如果用户不填&#xff0c;那这个数据就没有必要存进数据库&#xff09;&a…
阅读更多...
GPT-5：未来已来，你准备好了吗？

GPT-5：未来已来，你准备好了吗？

GPT-5 一年半后发布&#xff1f;对此你有何期待&#xff1f; IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;穆…
阅读更多...
基于STM32的智能宠物喂食器

基于STM32的智能宠物喂食器

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码控制代码应用场景 宠物定时喂食远程控制喂食常见问题及解决方案 常见问题解决方案结论 1. 引言 智能宠物喂食器可以通过定时和远程控制&#xff0c;实现对宠物的科学喂养。本文将…
阅读更多...
对抗生成：基于CycleGAN的风格迁移

对抗生成：基于CycleGAN的风格迁移

对抗生成&#xff1a;基于CycleGAN的风格迁移 前言相关介绍CycleGAN 的工作原理核心思想主要组件训练目标 优点缺点应用实例总结 实验环境项目地址LinuxWindows 项目结构具体用法准备数据&#xff08;以vangogh2photo为例&#xff09;进行训练&#xff08;以vangogh2photo为例&…
阅读更多...
【vulhub靶场之spring】——

【vulhub靶场之spring】——

简介&#xff1a; Spring是Java EE编程领域的一个轻量级开源框架&#xff0c;该框架由一个叫Rod Johnson的程序员在2002年最早提出并随后创建&#xff0c;是为了解决企业级编程开发中的复杂性&#xff0c;业务逻辑层和其他各层的松耦合问题&#xff0c;因此它将面向接口的编程思…
阅读更多...
Shiro框架漏洞复现（附修复方法）

Shiro框架漏洞复现（附修复方法）

Apache Shiro是一个强大易用的Java安全框架&#xff0c;提供了认证、授权、加密和会话管理等功能。Shiro框架直观、易用&#xff0c;同时也能提供健壮的安全性。 在Shiro框架下&#xff0c;用户登陆成功后会生成一个经过加密的Cookie。其Cookie的Key的值为RememberMe&#xff0…
阅读更多...
用Python实现超精准识别图片中的文字，零基础小白也能轻松学会！

用Python实现超精准识别图片中的文字，零基础小白也能轻松学会！

将图片中的文字转换成可编辑的文本&#xff08;通常称为光学字符识别&#xff0c;Optical Character Recognition, OCR&#xff09;可以通过Python的一些库来实现。一个流行的OCR库是Tesseract-OCR&#xff0c;它可以通过Python的pytesseract库来调用。首先&#xff0c;你需要在…
阅读更多...
【全国大学生电子设计竞赛】2021年B题

【全国大学生电子设计竞赛】2021年B题

&#x1f970;&#x1f970;全国大学生电子设计大赛学习资料专栏已开启&#xff0c;限时免费&#xff0c;速速收藏~
阅读更多...
3D，从无知到无畏

3D，从无知到无畏

欢迎来到 PaQiuQiu 的空间 本文为【3D&#xff0c;从无知到无畏专栏目录】&#xff0c;方便大家更好的阅读! &#x1f680;~写在前面~ 近年来&#xff0c;3D视觉技术在众多领域飞速发展&#xff0c;除了智能机器人、自动驾驶、无人机等无人系统&#xff0c;在我们身边的AR、VR…
阅读更多...
Nuxt2：强制删除window.__NUXT__中的数据

Nuxt2：强制删除window.__NUXT__中的数据

一、问题描述 在以前的一篇文章《Nuxt3: 强制删除__NUXT_DATA__的一种方式》中曾介绍了在Nuxt3中如何删除存在于页面id为__NUXT_DATA__的script节点中的数据。 此次&#xff0c;Nuxt2与Nuxt3不同在于它的数据是存在于window.__NUXT__&#xff0c;那么该如何处理呢&#xff1f;…
阅读更多...
Python 动态进度条实现，多个实例来展示实现方式

Python 动态进度条实现，多个实例来展示实现方式

目录 1. 使用 print 函数 2. 使用 tqdm 库 3. 自定义样式 4. 多进度条 5. 嵌套进度条 6. 更新频率控制 7. 动态描述 8. 自定义回调 9. 使用 click 库 10. 使用 rich 库 文末福利 文末赠免费精品编程资料~~ 在编写Python脚本时&#xff0c;特别是在处理长时间运行的…
阅读更多...
PDF Guru Anki：一款以PDF为中心的多功能办公学习工具箱

PDF Guru Anki：一款以PDF为中心的多功能办公学习工具箱

PDF Guru Anki 是一个假想的工具箱&#xff0c;因为目前我没有关于这个具体产品的详细信息。但是&#xff0c;根据这个名字和一般的PDF工具箱功能&#xff0c;我可以想象一些可能的独特功能&#xff0c;这些功能可以包括&#xff1a; PDF 阅读器&#xff1a;提供高效的PDF阅读…
阅读更多...
linux下的C++程序

linux下的C++程序

1.安装g编译环境&#xff08;c&#xff09;、gcc编译环境&#xff08;c语言&#xff09; sudo yum install gcc或者gcc-c //安装gcc/g编译(用管理员权限弄&#xff09; 验证是否安装成功 gcc或者g --version //如果显示版本号&#xff0c;则表示安装成功 sudo yum remove g…
阅读更多...
Go语言fmt包中print相关方法

Go语言fmt包中print相关方法

Go语言的fmt包提供了多种打印相关的函数&#xff0c;主要用于在控制台或其他输出目标上格式化并输出数据。下面是一些常用的print相关方法的用途和区别&#xff1a; 1.fmt.Print() 功能: fmt.Print() 将参数的内容按默认格式输出到标准输出&#xff08;通常是控制台&#xff…
阅读更多...
springcloud loadbalancer nacos无损发布

springcloud loadbalancer nacos无损发布

前言 故事背景 jenkins部署时总是会有几秒钟接口调用报错&#xff0c;观察日志是因为流量被下发到已下线的服务&#xff0c;重启脚本在停止应用之前先调用nacos注销实例api后再重启依然会短暂出现此问题。项目架构是springcloud alibaba,通过openfeign进行微服务之间调用&…
阅读更多...
npm vs pnpm 之幽灵依赖

npm vs pnpm 之幽灵依赖

在之前的文章&#x1f4c4; 果断放弃npm切换到pnpm–节约磁盘空间&#xff08;256G硬盘救星&#xff09; 中有提及 npm 扁平化带来的幽灵&#x1f47b;依赖 问题&#xff0c;但没有特别展开&#xff0c;这段时间实际业务中遇到了该问题&#xff0c;特整理如下&#xff1a; ♨️…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023