VUE3组合式API

create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了vite,为开发提供极速相应

使用create-vue

1.安装16.0或者更高版本的Node.js

2.npm init vue@latest指令会安装并执行create-vue

项目目录和关键文件

组合式API

Vue 3引入了组合式API(Composition API),这是一套全新的API,旨在解决大型组件逻辑复杂难以维护的问题,同时提供更灵活和可重用的代码组织方式。组合式API使得组件逻辑可以按照功能进行拆分,使得代码更加清晰、易于理解和维护。

setup

写法:如下图所示:

执行时机:在组件进行渲染之后会优先执行setup函数,如下周期图所示:

setup选项中写代码的特点:

如果在setup函数里声明的变量和方法,需要return出去才能够使用,如下图所示:

<script setup>语法糖

经过语法糖封装后简化了setup的使用,如下所示:

注意:在setup中的this不再指向组件实例了,而是指向undifined

reactive()

作用:接受对象类型数据的参数传入并且返回一个响应式对象

使用方法:

1.从vue包中导入reactive函数

2.在<script setup>中执行reactive函数并且传入类型为对象的参数,并使用变量接受响应式对象返回值

响应式对象可以影响视图的更新,如下案例所示:

但是reactive只能接受对象类型参数,不支持简单类型参数,针对于此推出了ref()

ref()

作用:接受简单类型或者对象类型的数据并且返回一个响应式对象

使用方法:

1.从vue包中导入ref函数

2.在<script setup>中执行ref函数并且传入初值,并使用变量接受响应式对象返回值

如下是一个ref使用案例:

reactive VS ref?

1.reactive不能处理简单类型的数据

2.ref参数类型支持更好但是必须通过.value访问修改

3.ref函数的内部实现依赖于reactive函数

computed计算属性函数

使用方式:

1.导入computed函数

2.执行函数在回调参数中return基于响应式数据做计算的值,用变量接收

如下是一个案例:

注意:计算属性应该是只读的

watch函数

作用:侦听一个或者多个数据的变化,数据变化的时候立刻执行回调函数

两个额外参数:1.immediate(立即执行) 2.deep(深度侦听)

使用方法:

  • 侦听单个数据
  • 1.导入watch函数
  • 2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
  • 注意:watch第一个参数是不需要使用ref.value的,会自动处理
  • 同时监听多个响应式数据的变化,不管哪个数据变化都需要执行回调
  • immedite
  • 说明:在侦听器创建的时候立即执行回调,响应式数据变化后继续执行回调  
  • deep
  • 默认使用watch监听的ref对象是浅层监听的,直接修改嵌套的对象是不会触发回调执行的,需要开启deep(depp一旦开启会执行递归调用,所以一般不建议开启,建议使用精确监听)

  • 精确监听对象的某个属性
  • 那么怎么在不开启deep的情况下侦听对象的某个属性,可以把第一个参数也替换成回调函数,返回需要侦听的属性就行

周期函数

基本使用:

1.导入

2.执行函数,传入参数

注意:如果是多次调用,那么会在时机成熟的时候依次执行

组合式API下的组件数据向下传递

基本思想

1.父组件中给子组件绑定属性

2.子组件通过props选项接受

在Vue3中局部组件不需要注册就可以直接使用了

组合式API下的组件数据向上传递

基本思想

1.父组件中给子组件标签通过@绑定事件

2.子组件中通过$emit方法触发事件

模板引用

在vue2中通过ref标识获取真实的dom对象或者组件实例对象

vue3中使用方法

1.调用ref函数生成一个ref对象

2.通过ref表示绑定ref对象到标签,然后dom对象就会保存到ref对象.value中

defineExpose

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,可以通过defineExpose编译宏指定哪些属性和方法允许访问

provide和inject

作用场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

使用方法:

1.在顶层组件使用provice函数提供数据

2.在底层组件使用inject函数获取数据

如下是一个小案例:

还可以传递方法:

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

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

相关文章

走进MySQL:从认识到入门(针对初学者)

一&#xff0c;引言 MySQL是一款久负盛名且广泛应用的关系型数据库管理系统&#xff0c;自1995年Michael Widenius和David Axmark在瑞典和芬兰发起研发以来&#xff0c;其发展历程可谓辉煌且深远。作为开源软件的代表&#xff0c;MySQL以其卓越的成本效益、高性能及高可靠性赢得…

Linux使用宝塔面板部署Discuz结合内网穿透实现公网访问本地论坛

文章目录 前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Discuz! Board&#xff08;以下简称 Discuz!&#xff09;是一套通用的社区论坛软件系统&#xff0c;用户可以在不需要任何编程的基础上&a…

ZLMediaKit ubantu 下编译

1、获取代码 #国内用户推荐从同步镜像网站gitee下载 git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit #千万不要忘记执行这句命令 git submodule update --init二、依赖库 Debian系(包括ubuntu&#xff09;系统下安装依赖的方法&#xff1a; #除了…

【考研数学】《660》+《880》高分搭配方法

&#x1f4dd;《660题》和《880题》高效刷题方法 1️⃣做题要有针对性&#xff0c;不要为了做题而做题 &#x1f4aa;660和880题虽然多&#xff0c;但是你不用全都做完&#xff0c;你可以把它当成是题源&#xff0c;里面的每一道题都很经典&#xff0c;如果搞懂一道&#xff…

AcWing 796. 子矩阵的和——算法基础课题解

AcWing 796. 子矩阵的和 题目描述 输入一个 n 行 m 列的整数矩阵&#xff0c;再输入 q 个询问&#xff0c;每个询问包含四个整数 x1,y1,x2,y2&#xff0c;表示一个子矩阵的左上角坐标和右下角坐标。 对于每个询问输出子矩阵中所有数的和。 输入格式 第一行包含三个整数 n&…

Leetcode刷题之消失的数字(C语言版)

Leetcode刷题之消失的数字&#xff08;C语言版&#xff09; 一、题目描述二、题目解析 一、题目描述 数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗&#xff1f; 注意&#xff1a;本题相对书上原题稍作…

大数据------JavaWeb------JDBC(完整知识点汇总)

JDBC 定义 全称为Java数据库连接&#xff08;Java DataBase Connectivity&#xff09;&#xff1a;是使用java语句来操作所有关系型数据库的一套API JDBC本质 它是官方定义的一套操作所有关系型数据库的规则&#xff08;即接口&#xff09;&#xff0c;各个数据库厂商会去实现…

使用Nodejs + express连接数据库mongoose

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…

企业官网为什么需要配置独享IP?

什么是独享IP和共享IP&#xff1f;独享IP有什么优点&#xff1f;企业网站配置独享IP有什么优势呢&#xff1f;下面给大家简单介绍下。 什么是独享IP和共享IP&#xff1f; 首先&#xff0c;让我们了解IP&#xff08;Internet Protocol&#xff09;的概念。IP地址是一个数字串&…

CSS水波纹效果

效果图&#xff1a; 1.创建一个div <div class"point1" click"handlePoint(1)"></div> 2.设置样式 .point1{width: 1rem;height: 1rem;background: #2ce92f;position: absolute;border-radius: 50%;z-index: 999;cursor: pointer;} 3.设置伪…

电子元器件线上交易商城搭建的价值和必要性-加速度jsudo

随着科技的飞速发展&#xff0c;电子元器件行业正迎来前所未有的变革。为了满足市场对于电子元器件采购的便捷性、高效性和多样性的需求&#xff0c;电子元器件商城的开发显得尤为重要。本文将探讨电子元器件商城开发的重要性、主要功能以及它如何助力行业发展。 电子元器件商城…

实用工具系列-ADB使用方式

作者持续关注 WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;WPS二次开发QQ群:250325397&#xff09;&#xff0c;摸鱼吹牛嗨起来&#xff0…

C++ | Leetcode C++题解之第22题括号生成

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<string> res; //记录答案 vector<string> generateParenthesis(int n) {dfs(n , 0 , 0, "");return res;}void dfs(int n ,int lc, int rc ,string str){if( lc n && rc n…

如何应对Android面试官 -> ActivityManagerService 是怎么启动的?

前言 本章主要讲解下 什么是 AMS&#xff0c;以及它是如何启动的&#xff1b; SystemServer SystemServer 通过按下电源键接通电源之后就会启动 BootRoom&#xff0c;BootRoom 就会拉起一个 BootLoader 程序&#xff0c;此程序会拉起 Linux Kernel「系统内核」&#xff0c;我们…

小程序如何通过把动态数据值传入到css文件中控制样式

场景&#xff1a;动态改变一个模块的高度 一、常用解决方法&#xff1a;行内样式绑值&#xff0c;或者动态class来传递 <viewclass"box":style"height: ${boxHeight}px">我是一个动态高度的box,我的高度是{{boxHeight}}px </view>二、高度传…

关于Linux下的进程替换(进程篇)

目录 进程替换是什么&#xff1f; 进程替换需要怎样操作&#xff1f; 替换函数 命名理解 不创建子进程进行进程替换 关于替换程序时的写时拷贝 fork创建子进程进行替换 函数1&#xff1a;execl 函数2&#xff1a;execv 函数3&#xff1a;execlp 函数4&#xff1a;execvp…

python-study-day1-(病人管理系统-带sql)

MainWindow代码 from tkinter import * from tkinter import messagebox from tkinter.ttk import Comboboxclass MianWindow(Frame):def __init__(self, masterNone):super().__init__(master, padx30, pady20)self.flag 0self.pack(expandTrue, fillBOTH)self.id StringVa…

vue3:菜单、标签页和面包屑联动效果

文章目录 1.整体思路2.实现过程 概要 提示&#xff1a;这里可以添加技术概要 例如&#xff1a; openAI 的 GPT 大模型的发展历程。 1.整体思路 在之前做的后台项目中&#xff0c;菜单、标签页和面包屑之间的联动&#xff0c;自己都是通过在路由前置守卫中&#xff0c;定义b…

铭飞SQL注入严重信息泄露【附POC】

感谢您抽出 阅读本文 MCMS是一个<完整开源的Java CMS&#xff01;基于SpringBoot 2架构&#xff0c;前端基于vue、element ui。MCMS存在SQL注入漏洞&#xff0c;攻击者可通过该漏洞获取数据库敏感信息等。目前厂商暂未发布修复措施解决此安全问题&#xff0c;建议使用此软件…

配置QtCreator能加载自定义插件的环境

配置对应环境 引言查看当前版本配置能够加载插件的环境 引言 生成的自定义插件能在QtCreator的设计器中加载&#xff0c;需要满足当前使用的QtCreator的编译时所需的Qt库和编译器。 查看当前版本 这里需要先查看自己使用的QtCreator的版本&#xff0c;即生成QtCreator时使用…