vue3的CompositionAPI是啥怎么使用

Vue 3中的Composition API是一组新的API,它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与Vue 2中的Options API(如data、methods、computed等选项)相比,Composition API提供了一种更加灵活和可组合的方式来编写组件逻辑。

下面是Composition API的一些主要方法和使用示例:

setup:这个函数在组件实例初始化之前被调用,可以在这里声明数据、计算属性、方法、生命周期钩子等。

javascript

export default {

  setup() {

    let name = "张三";

    function greet() {

      console.log(`Hello, ${name}!`);

    }

    return { name, greet }; // 必须在这里return,模板中才能使用

  }

}

 

在模板中,你可以使用{{ name }}来显示name的值,以及<button @click="greet">Greet</button>来触发greet方法。

2. ref和toRefs:ref用于定义一个基本类型的响应式数据,而toRefs则可以将响应式数据包装成一个普通的对象,使得在模板中可以直接使用对象的属性。

javascript

import { ref, toRefs } from 'vue';

export default {

  setup() {

    const count = ref(0);

    const state = toRefs({

      name: '张三',

      age: 30

    });

    return { count, ...state };

  }

}

 

computed:用于定义计算属性,只有当依赖的数据发生变化时才会重新计算。

javascript

import { ref, computed } from 'vue';

export default {

  setup() {

    const base = ref(1);

    const doubled = computed(() => base.value * 2);

    return { base, doubled };

  }

}

 

watch和watchEffect:用于监听数据变化。watch可以监听特定的响应式数据,而watchEffect则会自动收集依赖并执行回调函数。

javascript

import { ref, watch, watchEffect } from 'vue';

export default {

  setup() {

    const count = ref(0);

    

    watch(count, (newVal, oldVal) => {

      console.log(`Count changed from ${oldVal} to ${newVal}`);

    });

    

    watchEffect(() => {

      console.log(`Count is ${count.value}`);

    });

    

    return { count };

  }

}

 

生命周期钩子:虽然Composition API本身没有直接提供生命周期钩子的方法,但你可以通过onMounted、onUpdated等函数在setup中使用它们。

javascript

import { onMounted, onUpdated } from 'vue';

export default {

  setup() {

    onMounted(() => {

      console.log('Component mounted');

    });

    

    onUpdated(() => {

      console.log('Component updated');

    });

  }

}

在使用Composition API时,需要注意的是,由于setup函数在组件创建之前执行,因此其中的this关键字不会指向当前组件实例,而是undefined。如果需要与父组件通信,可以通过setup函数的参数来获取props和context。

Composition API提供了一种更为灵活和可复用的方式来组织Vue组件的逻辑,尤其适用于大型和复杂的Vue应用。

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

​​【收录 Hello 算法】3.3 数字编码

目录 3.3 数字编码 3.3.1 原码、反码和补码 3.3.2 浮点数编码 3.3 数字编码 Tip 在本书中&#xff0c;标题带有 * 符号的是选读章节。如果你时间有限或感到理解困难&#xff0c;可以先跳过&#xff0c;等学完必读章节后再单独攻克。 3.3.1 原码、反码和补码 在…

迅睿CMS中实现关键词搜索高亮

在迅睿CMS系统中实现关键词搜索高亮是提升用户体验和搜索效果的重要手段。当用户搜索某个关键词时&#xff0c;将搜索结果中的关键词高亮显示&#xff0c;可以帮助用户更快速地定位到所需信息。 关键词高亮的实现 在迅睿CMS中&#xff0c;你可以使用内置的dr_keyword_highlig…

Study--Oracle-01-单实例部署Oracle11G-R2

Oracle版本发布介绍 Oracle 19c和12c和11g功能区别_数据库_oracle_支持 一、CentOS 7 环境准备 1、软件准备 操作系统&#xff1a;CentOS 7 数据库版本: Oracle11g R2 2、操作系统环境配置 关闭selinux &#xff0c;编辑 /etc/selinux/config文件&#xff0c;设置SELINU…

C语言例题34、反向输出字符串(递归方式)

题目要求&#xff1a;输入5个字符后&#xff0c;使用递归方式逆序输出 #include <stdio.h>void reverse(int num) {char cur_char;if (num 1) {cur_char getchar();printf("逆序输出为&#xff1a;");putchar(cur_char);} else {cur_char getchar();revers…

宏电全栈式IoT赋能供排水智能监测,护航城市生命线

城市供水、排水系统是维系城市正常运行、满足群众生产生活需要的重要基础设施&#xff0c;是城市的“生命线”。随着城市化进程加快&#xff0c;城市规模不断扩大&#xff0c;地下管线增长迅速&#xff0c;城市“生命线安全”的监管日益面临挑战。 宏电作为物联网行业的领航者…

软件测试与管理:黑盒测试-等价类划分法和 边界值分析法

知识思维导图&#xff1a; 例题1&#xff1a;日期检查功能的等价类划分 设有一个档案管理系统&#xff0c;要求用户输入以年月表示的日期。假设日期限定在1990年1月~2049年12月&#xff0c;并规定日期由6位数字字符组成&#xff0c;前4位表示年&#xff0c;后2位表示月。现用等…

后台启动HIVE的JDBC连接

后台启动HIVE的JDBC连接 生活就像一杯咖啡&#xff0c;有时苦涩&#xff0c;有时香甜&#xff0c;但都是值得品味的经历。无论遇到什么挑战&#xff0c;记住在每一天的开始&#xff0c;你都有机会给自己倒上一杯清新的力量&#xff0c;为心灵添一抹温暖。勇敢地面对生活的苦与甜…

10000 字详细讲解 Spring 中常用注解及其使用

如下图京东购物页面&#xff0c;当我们选择点击访问某一类商品时&#xff0c;就会向后端发起 HTTP 请求&#xff0c;当后端收到请求时&#xff0c;就会找到对应的代码逻辑对请求进行处理&#xff0c;那么&#xff0c;后端是如何来查找处理请求相对应的代码呢&#xff1f;答案就…

C++使用单链表实现一元多项式的加,乘操作

相邀再次喝酒 待 葡萄成熟透 但是命运入面 每个邂逅 一起走到了 某个路口 是敌与是友 各自也没有自由 位置变了 各有队友 首先&#xff0c;按照惯例&#xff0c;十分欢迎大家边听歌边观看本博客&#xff01;&#xff01; 最佳损友 - 陈奕迅 - 单曲 - 网易云音乐 (163.com) 一…

leetcode295. 数据流的中位数

class MedianFinder {//A为小根堆&#xff0c;B为大根堆List<Integer> A,B;public MedianFinder() {A new ArrayList<Integer>();B new ArrayList<Integer>();}public void addNum(int num) {int m A.size(),n B.size();if(m n){insert(B,num);int top …

开源模型 Prometheus 2 能够评估其他语言模型,其效果几乎与 GPT-4 相当

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

springboot使用研究

map-underscore-to-camel-case: true 开启驼峰命名 GetMapping("/userInfo")public Result<Users> userInfo(RequestHeader(name "Authorization") String token,HttpServletResponse response) {Map<String, Object> map JwtUtil.parseT…

Java | Spring框架|Bean的装配之注解配置

Spring | Bean的装配之 注解配置&#xff1a;简化配置的新标准 Spring框架的注解配置是近年来流行的配置方式&#xff0c;它通过在Java代码中使用注解来简化Bean的配置。这种方式减少了XML配置文件的使用&#xff0c;使得Bean的定义更加直观和简洁。 一、 使用注解定义Bean …

Problem 5: Whack-A-Mole打地鼠

实战题&#xff1a;打地鼠 内容如附件所示&#xff1a; 测试数据为:1,2,4,8,9,10,11,14 答案为&#xff1a;10,2,4 原始分布&#xff1a; 击打10号 击打2号 击打4号 要求&#xff0c;所示实例解以图示的方式给出&#xff0c;并且5组测试数据都需要测试&#xff0c;…

软件工程案例学习-图书管理系统-面向对象方法

文档编号&#xff1a;LMS_1 版 本 号&#xff1a;V1.0 ** ** ** ** ** ** 文档名称&#xff1a;需求分析规格说明书 项目名称&#xff1a;图书管理系统 项目负责人&#xff1a;计敏 胡杰 ** ** …

开式双比例泵控制放大器

比例泵PQ控制放大器的主要作用是通过接收来自控制器的信号&#xff0c;并将其转换为适当的电流信号&#xff0c;以驱动变量泵。这种控制方式可以实现对泵输出流量和压力的精确控制&#xff0c;从而实现节能和提高效率的目的。比例泵PQ控制放大器通常用于节能型泵控制系统中&…

【Linux系列】tail查询使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【6D位姿估计】ZebraPose 层次化分组策略 由粗到细的表面编码

前言 本文介绍6D位姿估计的方法ZebraPose&#xff0c;也可以称为六自由度物体姿态估计&#xff0c;输入单张图片&#xff0c;输出物体的三维位置和三维方向。 它来自CVPR2022的论文&#xff0c;通过层次化分组策略&#xff0c;高效地编码物体表面的信息。 ZebraPose提出了一…

运维自动化之 ansible

目录 一 常见的自动化运维工具 &#xff08;一&#xff09;有哪些常见的 自动化运维工具 &#xff08;二&#xff09;为什么后面都变成用 ansible 二 ansible 基本介绍 1&#xff0c; ansible 是什么 2&#xff0c;ansible能干什么 3&#xff0c;ansible 工作原…

Linux网络—PXE高效批量网络装机

目录 一、部署PXE远程安装服务 1、搭建PXE远程安装服务器 1&#xff09;安装并启用 TFTP 服务 2&#xff09;安装并启用 DHCP 服务 3&#xff09;准备 Linux 内核、初始化镜像文件 4&#xff09;准备 PXE 引导程序 5&#xff09;安装FTP服务&#xff0c;准备CentOS 7 安…