vue3 组合式API

<!-- 深度监听  deep 点击按钮控制台,才输出count变化了: 1, 老值: 0;否则控制台不输出 -->
<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>

setup 语法糖 (API入口)

 <script setup>// 数据const message = 'this is ms'// 函数const logMessage = () =>{console.log(message);}</script><template><div>{{ message }}</div><button @click="logMessage ">log</button>
</template>

ref和 reactive的用法   

共同点: 用函数调用的方式生成响应式数据

不同点: reactive: 只支持对象类型的数据

               ref: 可以支持简单类型和对象类型的数据, 在脚本区域修改ref产生的响应式对象数据,必须通过value属性,来获取。

<script setup>
// 用ref和reactive 共同点。用函数调用的方式生成响应式数据
// 1.导入函数
// import { reactive } from 'vue';
// // 只支持对象类型
// const state = reactive({
//   count:0// })// // 定义一个函数// const setCount =()=>{
//   state.count++ 
// }import { ref } from 'vue';const state = ref(0)
const setCount =() =>{// 在脚本区域修改ref产生的响应式对象数据,必须通过value属性state.value++
}
</script><template><!-- <button @click="setCount">{{ state.count }}</button> -->
<button @click="setCount">{{ state }}</button></template>

计算属性computed

<script setup>
// 原始响应式数据
import { ref } from 'vue';
// 导入computed
import {computed} from 'vue';
const list = ref([1,2,3,4,5,6,7,8])
// 执行函数 return 计算之后的值,变量接收const computedList  = computed(() =>{// 计算属性中不应该有副作用(比如异步请求,修改dom)// 避免直接修改计算属性的值(计算属性应该是只读的)return list.value.filter(item => item > 2)
})setTimeout(()=>{list.value.push(9,10)
},3000)
</script><template><div>原始响应式数组 - {{ list }}</div><div>计算属性数组 - {{ computedList }}</div>
</template>

watch基本使用

<script setup>import { ref,watch } from 'vue'
const count = ref(0)
// 监听count的变化
// watchAPI,ref对象不需要加.value
watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)
})
</script>  <template><h1>{{ count }}</h1><button @click="count++">count is: {{ count }}</button>
</template>
 监听多个数据源
<script setup>import { ref,watch } from 'vue'const count = ref(0)
const name = ref('zhangsan')
const changeCount = () => {count.value++
}
const changeName = () => {name.value = 'lisi'
}// 监听多个数据源
watch([count,name],([newCount,newName],[oldCount,oldName])=>{console.log(`newCount: ${newCount}, oldCount: ${oldCount}`)console.log(`newName: ${newName}, oldName: ${oldName}`)}
)
</script><template><div><button @click="changeCount">count is: {{ count }}</button></div><div><button @click="changeName">name is: {{ name }}</button></div></template>
 立即执行

<!-- 立即执行的watchAPI  immidiate -->
<!-- 默认浅层监听   --><script setup>import { ref,watch } from 'vue'const count = ref(0)const setCount = () => {count.value++}watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)},{immediate:true})
</script><template><div><button @click="setCount">count is: {{ count }}</button></div>
</template> 
 深度执行
<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>
精确侦听 
<!-- 精确侦听对象的某个属性 --><!-- 在不开启deep的情况下,监听age的变化,只有age变化时才会执行回调 --><script setup>import { ref,watch } from 'vue'const state = ref({name:'asdas',age:10})const changeName = () => {state.value.name = 'children'}const changeAge = () => {state.value.age = 20}//  精确侦听某个具体属性 侦听agewatch(() => state.value.age,() => {console.log('age变化了')}) 
</script><template><div><div>当前name == {{ state.name }}</div><div>当前age == {{ state.age }}</div><div><button @click="changeName">修改name</button><button @click="changeAge">修改age</button></div></div></template>

生命周期API

<script setup>
import { onMounted } from 'vue';onMounted(() => {console.log('1.组件挂载完毕mounted执行了');
}) 
onMounted(() => {console.log('2.组件挂载完毕mounted执行了');
}) 
</script><template></template>

组合式API下的父传子(转到 父传子 内容)

基本思想:

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

2. 子组件内部通过props 选项接收

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

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

相关文章

基于PHP的文件包含介绍

引言&#xff1a;在实际开发过程中&#xff0c;经常会遇到部分模块功能需要重复使用的情况&#xff0c;比如数据库的增删改查&#xff0c;文件包含通过将需要重复使用的功能模块代码引入其他文件的内容&#xff0c;实现重用代码、分离配置等。然而&#xff0c;如果文件包含操作…

QT中通过TCP协议多线程的文件传输(客户端)

首先&#xff0c;新建一个项目&#xff0c;我命名为了SendFileClient 首先我们要在pro文件中 代码第一行加入network的后缀 一、窗口搭建 如图所示&#xff0c;在第一个QWidget中让客户端输入IP&#xff0c;端口号 连接服务器 第二个Qwidget 设置一个LineEdit,供客户端选择要…

报表系统之Redash

Redash 是一个开源的数据可视化和仪表板工具&#xff0c;旨在帮助用户轻松地从多个数据源中提取、查询、可视化数据&#xff0c;并分享结果。它的设计目标是让数据分析变得更加便捷&#xff0c;即使是非技术用户也能通过简单的操作生成复杂的数据报告和仪表板。 核心概念和功能…

sql基础语句题练

此篇文章所有题都来源于牛客网 牛客网在线编程_SQL篇_非技术快速入门 记录一下自己的做题的历程&#xff0c;废话不多说直接开整 1.查询所有列 select * from user_profile user_profile代表表table的意思 2.查询多列 select device_id,gender,age,university from user…

[godot] 采用状态机时,如何处理攻击时移动?如“冲撞”

这里以‘史莱姆撞击’为例子&#xff0c;将‘空中跃进’定义为伤害帧。&#xff08;见下图&#xff09; 先梳理流程&#xff1a;a.史莱姆原地蓄力(起跳准备)--->b.跳起并移动一段距离(空中跃进)--->c.落地调整 一 当状态机进入‘攻击状态’时&#xff0c;在enter()中…

计算机毕业设计PySpark+Django农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop

基于Spark的农产品个性推荐系统 相关技术介绍: 1. Python Python是一种高级编程语言&#xff0c;具有简洁、易读、易学的特点&#xff0c;被广泛应用于Web开发、数据分析、人工智能等领域。 在此系统中&#xff0c;我们使用Python进行后端开发&#xff0c;利用其强大的语法…

基本数据类型 --- 浮点型

float的机器码表示&#xff1a; 一个float数据 (pow(-1, sign) fraction) * pow(2, exponent - 127) 由上图&#xff0c;可得&#xff1a; (pow(-1, sign) fraction) * pow(2, exponent - 127) ( 1 2^(-2) ) * pow(2, 124-127) 0.15625 其他文章&#xff1a; https://b…

Docker Swarm部署SpringCloud Alibaba微服务踩坑记录

为了方便部署和维护微服务项目&#xff0c;还是得上集群部署方案&#xff0c;决定采用Docker的swarm&#xff0c;为什么不是k8s&#xff0c;因为部署骑来又是个新的工具&#xff0c;之前就一直用的docker&#xff0c;自带了类k8s的工具&#xff0c;索性就直接使用swarm了&#…

力扣(K件物品的最大和)

数据量小不需要考虑时间复杂度 数学思维理清楚步骤---然后代码翻译实现 Ⅰ、 K件物品的最大和 袋子中装有一些物品&#xff0c;每个物品上都标记着数字 1 、0 或 -1 。 给你四个非负整数 numOnes 、numZeros 、numNegOnes 和 k 。 袋子最初包含&#xff1a; numOnes 件标…

鸿蒙HarmonyOS之使用ArkTs语言实现层级树状目录选择UI

一、实现效果 二、实现步骤 代码示例中用到的颜色、图片等资源可以自行替换设置 1、Index.ets 里面调用 import { CategoryView} from ./CategoryView;//主页面 Entry Component struct Index {State tabsIndex: number 0;build() {...//层级目录ViewCategoryView()...} …

ReTagList标签列表(API)

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略) 基于ElTag实现的Tag列表,支持Tag列表多选,动态Tag列表 ReTagList标签列表 基础 简单展示Tag列表,可通过size指定尺寸 查看 /demo/tag-list/basic.md …

Arduino开源四足蜘蛛机器人制作教程

视频教程&#xff1a;手把手叫你做四足蜘蛛机器人——1零件介绍_哔哩哔哩_bilibili 一、项目介绍 1.1 项目介绍 Arduino主控&#xff0c;图形化编程&#xff0c;趣味学习 Arduino nano开发板舵机扩展底板 4.8V可充电电池&#xff0c;支持Arduino C语言编程和米思齐图形化编程…

Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件

要使用 Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件&#xff0c;你可以按照以下步骤操作&#xff1a; ### 步骤 1: 添加依赖 首先&#xff0c;确保你的项目中添加了 Spring Cloud Config 客户端和 Bus 的依赖。对于 Maven 项目&#xff0c;pom.xml 文件应该…

浅谈Kafka(一)

浅谈Kafka&#xff08;一&#xff09; 文章目录 浅谈Kafka&#xff08;一&#xff09;Kafa的设计是什么样的数据传输的事务定义消息队列的应用场景Kafka怎么样判断节点是否存活Kafka的消息是采用pull模式还是push模式Kafka在磁盘上的消息格式Kafka高效文件存储设计特点Kafka与传…

Yolov10网络详解与实战(附数据集)

文章目录 摘要模型详解模型实战训练COCO数据集下载数据集 COCO转yolo格式数据集&#xff08;适用V4&#xff0c;V5&#xff0c;V6&#xff0c;V7&#xff0c;V8&#xff09;配置yolov10环境训练断点训练测试 训练自定义数据集Labelme数据集格式转换训练测试 总结 摘要 模型详解…

CeresPCL 岭回归拟合(曲线拟合)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 由于在使用最小二乘插值拟合时,会涉及到矩阵求逆的操作,但是如果这个矩阵接近于奇异时,那么拟合的结果就会与我们期望的结果存在较大差距,因此就有学者提出在最小二乘的误差函数中添加正则项,即: 这里我们也可…

OpenGL-ES 学习(8) ---- FBO

目录 FBO OverViewFBO 优点使用FBO的步骤 FBO OverView FBO(FrameBuffer Object) 指的是帧缓冲对象&#xff0c;实际上是一个可以添加缓冲区容器&#xff0c;可以为其添加纹理或者渲染缓冲区对象(RBO) FBO(FrameBuffer Object) 本身不能用于渲染&#xff0c;只有添加了纹理或者…

对派生类指针使用C风格的强制类型转换为基类指针

以下来自语言大模型的回答&#xff1a; 值可能发生改变 当对派生类指针使用C风格的强制类型转换成基类指针时&#xff0c;指针的值可能会发生改变。这主要是由于多重继承和虚继承的存在。以下是几个关键点解释: 单继承情况下: 在单继承的情况下&#xff0c;派生类指针转换为…

Stability AI发布了单目视频转4D模型的新AI模型:Stable Video 4D

开放生成式人工智能初创公司Stability AI在3月发布了Stable Video 3D&#xff0c;是一款可以根据图像中的物体生成出可旋转的3D模型视频工具。Stability AI在7月24日发布了新一代的Stable Video 4D&#xff0c;增添了赋予3D模移动作的功能。 Stable Video 4D能在约40秒内生成8…