Vue(14)——组合式API①

setup

特点:执行实际比beforeCreate还要早,并且获取不到this

<script>
export default{setup(){console.log('setup函数');},beforeCreate(){console.log('beforeCreate函数');}
}
</script>

                     

在setup函数中提供的数据和方法,想要在模版当中利用,必须在函数最后使用return。

<script>
export default{setup(){const a = 'okk';const loga = ()=>{console.log(a);}console.log('setup函数');return{a,loga}},beforeCreate(){console.log('beforeCreate函数');},}
</script><template><div>{{ a }}</div>
</template>

当然有更简便的方法,setup语法糖。在script标签里面加上setup即可。

<script setup>
const a = 'okk'
const loga =() =>{console.log(a);}
</script>

reactive和ref

reactive

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

核心步骤:

  1. 从vue包中导入reactive函数
  2. 在<script setip>中执行reactive函数并传入类型为对象的初始值,并使用变量接收返回值 

<script setup>
import { reactive } from 'vue';
const state = reactive({count:100
})
const add = ()=>{state.count++
}
</script><template><div><div>{{ state.count }}</div><button @click="add">+</button></div>
</template>

 reactive只能接受对象类型的数据,也有可以接受简单类型的数据的函数

ref

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

核心步骤:

  1. 从vue包导入ref函数
  2. 在<script setup>中执行ref函数并传入初始值,使用变量接收ref函数的返回值

 注 : 在script中访问数据的时候需要通过.value,在template中不需要

<script setup>
import { ref } from 'vue';
const state = ref(0)
const add = ()=>{state.value++
}
</script><template><div><div>{{ state }}</div><button @click="add">+</button></div>
</template>

computed

核心步骤:

  1. 导入computed函数
  2. 执行函数在回调参数中return基于响应式数据做计算的值,用变量接收
<script setup>
import { computed, ref } from 'vue';const list = ref([1,2,3,4,5,6,7,8])
const com = computed(()=>{return list.value.filter(item=>item>2)
})
</script><template><div><div>原始数据:{{ list }}</div><div>计算后:{{ com }}</div></div>
</template>

 watch

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

两个参数:immediate(立即执行),deep(深度侦听)

监视单个数据的变化:

watch(ref对象,(newValue,oldValue) =>{...})

监视多个数据的变化:

watch([对象1,对象2],(newArr,oldArr)=>{...})

<script setup>
import { watch, ref } from 'vue';const count = ref(0)
const name = ref('张三')const change =() =>{count.value++
}
const changename=() =>{name.value='李四'
}
// 监视单个数据
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue);
// })//监视多个数据watch([对象1,对象2],(newArr,oldArr)=>{...})
watch([count,name],(newArr,oldArr)=>{console.log(newArr,oldArr);} )
</script><template><div><div>{{ count }}</div><button @click="change">改数字</button><div>{{ name }}</div><button @click="changename">改名称</button></div>
</template>

immediate

说明:在侦听器创建时立刻触发回调,响应式数据变化之后继续执行回调

watch([count,name],(newArr,oldArr)=>{

  console.log(newArr,oldArr);

},{

  immediate:true

}

)

deep 

默认watch进行的是浅层监视,可以监视简单类型,不能监视到复杂类型内部数据的变化。

deep是深度监视,能够监视到对象类型里面某个数据的变化

watch(userInfo,(newValue)=> {

  console.log(newValue);

},{

  deep:true

})

精确侦听对象的某个属性 

watch(

  () => userInfo.value.age,

  (newValue,oldValue) => console.log(newValue,oldValue)

)

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

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

相关文章

普通查询+聚合函数的使用(8个例子,数值和字符串的比较)

目录 回顾普通查询聚合函数的使用 表数据 例子1 例子2 例子3 ​​​​​​​例子4 例子5 例子6 例子7(数值和字符串的比较) 例子8 回顾普通查询聚合函数的使用 之前我们介绍过聚合函数 --mysql分组查询 -- 聚合函数(介绍,使用),group by使用,分组聚合统计(使用,havi…

【Unity杂谈】iOS 18中文字体显示问题的调查

一、问题现象 最近苹果iOS 18系统正式版推送&#xff0c;周围升级系统的同事越来越多&#xff0c;有些同事发现&#xff0c;iOS 18上很多游戏&#xff08;尤其是海外游戏&#xff09;的中文版&#xff0c;显示的字很奇怪&#xff0c;就像一些字被“吞掉了”&#xff0c;无法显示…

【ArcGIS微课1000例】0123:数据库中要素类批量转为shapefile

除了ArcGIS之外的其他GIS平台,想要打开ArcGIS数据库,可能无法直接打开,为了便于使用shp,建议直接将数据库中要素类批量转为shapefile。 文章目录 一、连接至数据库二、要素批量转shp一、连接至数据库 打开ArcMap,或者打开ArcCatalog,找到数据库连接,如下图: 数据库为个…

人工智能的前景与未来就业市场:机遇、挑战与社会影响

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的方方面面&#xff0c;它不仅引领着技术革新的浪潮&#xff0c;更在无声中重塑着我们的就业市场和社会结构。站在这个时代的交汇点上&#xff0c;我们不禁要问&#xff1a;人工智能将…

Vue2学习笔记(02条件渲染 、监视数据的原理)

1、v-if和v-show的区别 2、Vue监视数据的原理

Ansible部署与应用基础

由于互联网的快速发展导致产品更新换代速度逐步增长&#xff0c;运维人员每天都要进行大量的维护操作&#xff0c;按照传统方式进行维护使得工作效率低下。这时部署自动化运维就 可以尽可能安全、高效的完成这些工作。 一、Ansible概述 1.什么是Ansible Ansible 是基于 Pytho…

C++编译环境(IDE)推荐及安装

IDE是什么 嗨嗨嗨&#xff0c;我又来水博文了 今天来给大家推荐几款好用的IDE IDE是集成开发环境&#xff08;Integrated Development Environment&#xff09;的缩写&#xff0c;是一种软件应用程序&#xff0c;提供了用于软件开发的各种工具和功能&#xff0c;包括代码编辑…

刚刚,Stable Diffusion 2024升级,最强Ai绘画整合包、部署教程(解压即用)

2024Ai技术大爆发的元年 目前两款Ai神器大火 一款是大名鼎鼎的Chat GPT 另外一款—Stable Diffusion 堪称全球最强Ai绘画工具 Stable Diffusion Ai绘画2024版本更新啦&#xff01; 从4.8.7更新至**4.9版本&#xff01;**更新优化和大模型增加&#xff0c;无需安装&#xf…

在SpringCloud中实现服务间链路追踪

在微服务架构中&#xff0c;由于系统的复杂性和多样性&#xff0c;往往会涉及到多个服务之间的调用。当一个请求经过多个服务时&#xff0c;如果出现问题&#xff0c;我们希望能够快速定位问题所在。这就需要引入链路追踪机制&#xff0c;帮助我们定位问题。 Spring Cloud为我们…

UPPAL安装

UPPAL安装 下载安装UPPAAL 在UPPAAL官网上下载所需版本的UPPAAL&#xff1a;https://uppaal.org/downloads/#uppaal5.0 此处下载Windows UPPAAL5.0&#xff1a; 下载完成后&#xff0c;双击.exe文件&#xff0c;一路点击“下一步”&#xff0c;安装完成&#xff0c;并关闭&am…

AJAX 入门 day3 XMLHttpRequest、Promise对象、自己封装简单版的axios

目录 1.XMLHttpRequest 1.1 XMLHttpRequest认识 1.2 用ajax发送请求 1.3 案例 1.4 XMLHttpRequest - 查询参数 1.5 XMLHttpRequest - 数据提交 2.Promise 2.1 Promise认识 2.2 Promise - 三种状态 2.3 案例 3.封装简易版 axios 3.1 封装_简易axios_获取省份列表 3…

云和恩墨携手华为,发布zCloud数据库备份管理一体机并宣布共建数据保护生态...

为期三天的第九届华为全联接大会&#xff08;HUAWEI CONNECT 2024&#xff09;于9月19日在上海世博中心&展览馆盛大召开。20日下午&#xff0c;一场围绕“全场景数据保护&#xff0c;护航数智化时代”的专题论坛举办&#xff0c;云和恩墨受邀参加&#xff0c;并期待与华为合…

Apache APISIX学习(1):介绍、docker启动

一、介绍 Apache APISIX 是一个动态、实时、高性能的 API 网关&#xff0c; 提供负载均衡、动态上游、灰度发布、服务熔断、身份认证、可观测性等丰富的流量管理功能。你可以把 Apache APISIX 当做流量入口&#xff0c;来处理所有的业务数据&#xff0c;包括动态路由、动态上游…

两台虚拟机之分布式部署

Apache2 和 PHP 安装 在虚拟机1上执行以下步骤: 更新系统包列表: sudo apt update安装 Apache2: sudo apt install apache2 -y安装 PHP 及其扩展: sudo apt install php libapache2-mod-php php-mysql配置Apache和PHP sudo nano /etc/apache2/mods-enabled/dir.conf#…

使用 Internet 共享 (ICS) 方式分配ip

设备A使用dhcp的情况下&#xff0c;通过设备B分配ip并共享网络的方法。 启用网络共享&#xff08;ICS&#xff09;并配置 NAT Windows 自带的 Internet Connection Sharing (ICS) 功能可以简化 NAT 设置&#xff0c;允许共享一个网络连接给其他设备。 打开网络设置&#xff1…

ComfyUI - 使用 ComfyUI 部署与测试 FLUX.1 图像生成模型 教程

前言 FLUX.1 是由 Black Forest Labs 推出的文本到图像生成模型&#xff0c;已成为 AI 绘画领域的高品质模型。该模型由 Stability AI 的前核心成员开发&#xff0c;具备强大的生成能力和高质量的图像输出。目前&#xff0c;Flux 的相关模型&#xff1a; Flux & AE 模型&…

【图虫创意-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

详解Vite创建Vue3项目router-less-scss-pinia-持久化

前言 Vite 和 Webpack 都是现代化的前端构建工具&#xff0c;它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的&#xff0c;但它们在设计和实现方面有许多不同之处。webpack可以看我的上一篇文章 一、准备工作安装工具 这里我们简单介绍一下文章中使用到…

2024年双十一有什么好物值得买呢?双十一必买好物清单

双十一买什么犒劳自己既不会浪费钱又可以增添生活的幸福感&#xff1f;以下就整理了五款更适合与秋冬独自生活相伴的好物&#xff0c;精致增加生活氛围感&#xff0c;热爱生活的同时更好的爱自己&#xff01;努力工作和生活当然也要更好的享受生活&#xff0c;给生活创造更多美…

智慧医院人工智能应用场景 | 智能导诊系统源码

近年来&#xff0c;智能医疗在国内外的发展热度不断提升。图像识别、深度学习、神经网络、大模型、语音等关键技术的突破带来了人工智能技术新一轮的发展。 场景一&#xff1a;智能机器人 医疗机器人是指能够在医疗领域执行特定任务或功能的机器人&#xff0c;包括手术机器人、…