vue3全网最全教程-----(2)

目录

3.9.【watch】

* 情况一

* 情况二

 情况三

* 情况四

 情况五

3.10. 【watchEffect】

3.11. 【标签的 ref 属性】

3.12. 【props】

3.13. 【生命周期】

3.14. 【自定义hook】

 

3.9.【watch】

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到

* 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

以下几种情况：

<template><div class="person"><h1>情况一：监视【ref】定义的【基本类型】数据</h1><h2>当前求和为：{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 监视，情况一：监视【ref】定义的【基本类型】数据const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
</script>

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<template><div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let person = ref({name:'张三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><hr><h2>测试：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj变化了',newValue,oldValue)})
</script>

* 情况四

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。
  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template><div class="person"><h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)}) */// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
</script>

 情况五

监视上述的多个数据

<template><div class="person"><h1>情况五：监视上述的多个数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况五：监视上述的多个数据watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})</script>

3.10. 【watchEffect】

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

    <template><div class="person"><h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1><h2 id="demo">水温：{{temp}}</h2><h2>水位：{{height}}</h2><button @click="changePrice">水温+1</button><button @click="changeSum">水位+10</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 数据let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch实现，需要明确的指出要监视：temp、heightwatch([temp,height],(value)=>{// 从value中获取最新的temp值、height值const [newTemp,newHeight] = value// 室温达到50℃，或水位达到20cm，立刻联系服务器if(newTemp >= 50 || newHeight >= 20){console.log('联系服务器')}})// 用watchEffect实现，不用const stopWtach = watchEffect(()=>{// 室温达到50℃，或水位达到20cm，立刻联系服务器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('联系服务器')}// 水温达到100，或水位达到50，取消监视if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

    3.11. 【标签的 ref 属性】

    作用：用于注册模板引用。

    • 用在普通DOM标签上，获取的是DOM节点。

    • 用在组件标签上，获取的是组件实例对象。

    用在普通DOM标签上：

<template><div class="person"><h1 ref="title1">贾公子</h1><h2 ref="title2">前端</h2><h3 ref="title3">Vue</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">点我打印内容</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通过id获取元素const t1 = document.getElementById('title1')// 打印内容console.log((t1 as HTMLElement).innerText)console.log((<HTMLElement>t1).innerText)console.log(t1?.innerText)/************************************/// 通过ref获取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
</script>

用在组件标签上：

<!-- 父组件App.vue -->
<template><Person ref="ren"/><button @click="test">测试</button>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {ref} from 'vue'let ren = ref()function test(){console.log(ren.value.name)console.log(ren.value.age)}
</script><!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 数据let name = ref('张三')let age = ref(18)/****************************//****************************/// 使用defineExpose将组件中的数据交给外部defineExpose({name,age})
</script>

3.12. 【props】

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {id:string,name:string,age:number}// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

App.vue中代码： 

<template><Person :list="persons"/>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {reactive} from 'vue'import {type Persons} from './types'let persons = reactive<Persons>([{id:'e98219e12',name:'张三',age:18},{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}])</script>

Person.vue中代码：

<template>
<div class="person"><ul><li v-for="item in list" :key="item.id">{{item.name}}--{{item.age}}</li></ul></div></template><script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'// 第一种写法：仅接收
// const props = defineProps(['list'])// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]})console.log(props)</script>

3.13. 【生命周期】

  • 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

  • 规律：

    生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

  • Vue2的生命周期
创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted更新阶段：beforeUpdate、updated销毁阶段：beforeDestroy、destroyed
  • Vue3的生命周期
创建阶段：setup挂载阶段：onBeforeMount、onMounted更新阶段：onBeforeUpdate、onUpdated卸载阶段：onBeforeUnmount、onUnmounted

  • 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

  • 示例代码：

<template><div class="person"><h2>当前求和为：{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div>
</template><!-- vue3写法 -->
<script lang="ts" setup name="Person">import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'// 数据let sum = ref(0)// 方法function changeSum() {sum.value += 1}console.log('setup')// 生命周期钩子onBeforeMount(()=>{console.log('挂载之前')})onMounted(()=>{console.log('挂载完毕')})onBeforeUpdate(()=>{console.log('更新之前')})onUpdated(()=>{console.log('更新完毕')})onBeforeUnmount(()=>{console.log('卸载之前')})onUnmounted(()=>{console.log('卸载完毕')})
</script>

3.14. 【自定义hook】

  • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。

  • 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。

示例代码：

  • useSum.ts中内容如下：

import {ref,onMounted} from 'vue'export default function(){let sum = ref(0)const increment = ()=>{sum.value += 1}const decrement = ()=>{sum.value -= 1}onMounted(()=>{increment()})//向外部暴露数据return {sum,increment,decrement}
}
  • useDog.ts中内容如下：
import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'export default function(){let dogList = reactive<string[]>([])// 方法async function getDog(){try {// 发请求let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')// 维护数据dogList.push(data.message)} catch (error) {// 处理错误const err = <AxiosError>errorconsole.log(err.message)}}// 挂载钩子onMounted(()=>{getDog()})//向外部暴露数据return {dogList,getDog}
}

组件中具体使用：

<template><h2>当前求和为：{{sum}}</h2><button @click="increment">点我+1</button><button @click="decrement">点我-1</button><hr><img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> <span v-show="dogList.isLoading">加载中......</span><br><button @click="getDog">再来一只狗</button>
</template><script lang="ts">import {defineComponent} from 'vue'export default defineComponent({name:'App',})
</script><script setup lang="ts">import useSum from './hooks/useSum'import useDog from './hooks/useDog'let {sum,increment,decrement} = useSum()let {dogList,getDog} = useDog()
</script>

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

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

相关文章

TVS 管选型与 ESD 防护设计

TVS 管选型与 ESD 防护设计

文章目录 ESD 防护设计 TVS管的基础特性 TVS管的选型方法 TVS管布局细节 参考文献 ESD 防护设计 静电防护设计是让电路板外接的各类金属按钮开关在接触到外界空气放电或接触放电时&#xff0c;在这种瞬间出现的大能量注入到电路板后&#xff0c;能够通过某种设计好的通道泄…
阅读更多...
VSCode + vite + vue3断点调试配置

VSCode + vite + vue3断点调试配置

没想到这个配置我搞了一上午&#xff0c;网上很多的配置方案都没有效果。总算搞定了&#xff0c;特此记录一下。 首先需要在.vscode文件夹下面创建launch.json配置文件。然后输入如下配置&#xff1a; {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。//…
阅读更多...
「Verilog学习笔记」状态机与时钟分频

「Verilog学习笔记」状态机与时钟分频

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 状态机写法 timescale 1ns/1nsmodule huawei7(input wire clk ,input wire rst ,output reg clk_out );//*************code***********//parameter S0 0, S1 1 , S2…
阅读更多...
批量抠图软件哪个好用？推荐这三款抠图工具给你

批量抠图软件哪个好用？推荐这三款抠图工具给你

在数字图像处理的世界里&#xff0c;抠图是个不可或缺的环节。对于那些经常需要从复杂背景中提取主体的设计师和摄影师来说&#xff0c;抠图技巧无疑是一项宝贵的职业技能。然而&#xff0c;当面对大量的抠图需求时&#xff0c;手动处理不仅耗时&#xff0c;而且效率低下。因此…
阅读更多...
Python圣诞树代码

Python圣诞树代码

Python圣诞树代码 # 小黄 2023/12/25import turtle as t # as就是取个别名&#xff0c;后续调用的t都是turtle from turtle import * import random as rn 100.0speed(20) # 定义速度 pensize(5) # 画笔宽度 screensize(800, 800, bgblack) # 定义背景颜色&#xff0c;可…
阅读更多...
rsync的介绍与使用

rsync的介绍与使用

rsync的介绍与使用 一、简介 rsync&#xff08;remote synchronize&#xff09;是Liunx/Unix下的一个远程数据同步工具。它能够以非常高效的方式传输和同步文件&#xff0c;它可以将一个目录的文件快速地同步到另一个目录&#xff0c;还可以通过网络快速同步多台主机间的文件…
阅读更多...
72 DFS解决目标和问题

72 DFS解决目标和问题

问题描述&#xff1a;给你一个整数数组和一个整数target。 向数组中每个整数前添加或-,然后串联起所有整数&#xff0c;返回通过该种方法串联其所有的整数并且计算结果等于target的不同表达式的个数。 dfs求解&#xff1a;每次选择可以有选或不选两种&#xff0c;最多进行num…
阅读更多...
ssm基于javaweb的数学竞赛网站的设计与实现论文

ssm基于javaweb的数学竞赛网站的设计与实现论文

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装数学竞赛网站软件来发挥其高效地信息处理的作用&#xff0c…
阅读更多...
分享72个NodeJs项目源码总有一个是你想要的

分享72个NodeJs项目源码总有一个是你想要的

分享72个NodeJs项目源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1_bzxbmBlN8ga4-Ci1I0-0w?pwd6666 提取码&#xff1a;6666 项目名称 A lottery webapp …
阅读更多...
【快速全面掌握 WAMPServer】07.整明白 MySQL 和 MariaDB

【快速全面掌握 WAMPServer】07.整明白 MySQL 和 MariaDB

网管小贾 / sysadm.cc 上一篇我们学习了 PHP &#xff0c;今天我们接着来学习了解一下另一位 LAMP 中的 M &#xff0c;同样是作为四剑客之一的 MySQL/MariaDB 。 MySQL/MariaDB 实际上是指数据库&#xff0c;是一种关系型数据库管理系统&#xff0c;可与 PHP 解释器一起配合&…
阅读更多...
Groovy闭包的一些操作

Groovy闭包的一些操作

文章目录 闭包1闭包的一些用法2 闭包在字符串中的使用3 闭包中的变量4 闭包中嵌套闭包5 闭包委托策略 闭包 ​ 闭包其实就是一段用{}包起来的代码&#xff0c;可以通过下面例子了解一下闭包。 //这是一段闭包的代码 def a {println("hello groovy")} //可以通过ca…
阅读更多...
零基础入门跨境电商独立站，看这篇文章就够了！

零基础入门跨境电商独立站，看这篇文章就够了！

对于跨境电商卖家来说&#xff0c;多平台、多站点的布局是非常重要的战略。这样做可以规避”鸡蛋放在同一个篮子里”的风险也能够追求更高的销售额和利润。同时&#xff0c;市场的变化也带来了新的发展机会&#xff0c;因此很多出海企业都希望抓住独立站的新机遇&#xff0c;抢…
阅读更多...
Spire.Office 8.12.2 for .NET

Spire.Office 8.12.2 for .NET

Spire.Office 8.12.2 发布。在此版本中&#xff0c;Spire.Doc支持Word到PCL和PostScript转换中的文本整形以及确定文档是否加密&#xff1b;Spire.Presentation支持将母版页转换为图像&#xff1b;Spire.PDFViewer支持在WinForm项目中使用Ctrl滚轮实现界面缩放效果。此外&#…
阅读更多...
KaiwuDB 受邀亮相“ACDU 中国行”数据库技术沙龙（西安站）

KaiwuDB 受邀亮相“ACDU 中国行”数据库技术沙龙（西安站）

12月23日&#xff0c;由中国计算机学会&#xff08;CCF&#xff09;指导&#xff0c;浪潮数据库、中国数据库联盟、墨天轮数据库社区等联合主办的“ACDU 中国行”数据库技术发展与实践沙龙&#xff08;西安站&#xff09;成功举办。KaiwuDB 高级架构师赵衎衎受邀出席沙龙并做主…
阅读更多...
win上使用wireshark 抓包 | 安装、实战抓包、筛选规则

win上使用wireshark 抓包 | 安装、实战抓包、筛选规则

先随便讲两句吧 win 上抓包&#xff0c;使用wireshark 直接运行&#xff0c;通过选定网卡、配置筛选规则 相比&#xff0c;在linux 上抓包&#xff0c;直接使用命令 tcpdump 再添加筛选规则 就可以 好像wireshark的一个插件不维护&#xff0c;导致需要重新安装插件&#xff0c;…
阅读更多...
用电脑将图片转为excel表格有几种方法？怎么操作？

用电脑将图片转为excel表格有几种方法？怎么操作？

将图片转为Excel表格&#xff0c;一般需要借助OCR(光学字符识别)技术。OCR技术可以将图片中的文字提取出来&#xff0c;并转换成Excel表格中的数据。以下是几种常用的方法&#xff1a; 一、.使用在线OCR工具 1、打开金鸣表格文字识别&#xff08;简称金鸣识别&#xff09;网站…
阅读更多...
MSF(Metasploit Framework)详细教程

MSF(Metasploit Framework)详细教程

一. 简介 Metasploit 是一个开源的渗透测试开源软件&#xff0c;也是一个逐步发展成熟的漏洞研究与渗透测试代码开发平台&#xff0c;此外也将成为支持整个渗透测试过程的安全技术集成开发与应用环境&#xff0c;2009年10月&#xff0c;Metasploit项目被一家渗透测试技术领域的…
阅读更多...
关于StartAI生图下载问题

关于StartAI生图下载问题

最近小编常常收到一些小伙伴对StartAI生图的问题反馈&#xff0c;今天为大家同一解答吧&#xff01; Q1&#xff1a;小编小编&#xff0c;为什么我生图后下载图片在文件夹中显示空白呀&#xff1f; 小编&#xff1a;当前我们StartAI版本0.4.5在下载图片时还未添加保存类型&…
阅读更多...
Dubbo相关面试题及答案

Dubbo相关面试题及答案

1、Dubbo的基本架构是怎样的&#xff1f; Dubbo是一个高性能的Java RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;它的基本架构主要由以下几个核心组件构成&#xff1a; Provider&#xff08;服务提供方&#xff09;&#xff1a; Provider是指暴露服务的服务提供者…
阅读更多...
K8S Helm 安装ingress-nginx/ingress-nginx

K8S Helm 安装ingress-nginx/ingress-nginx

安装ingress-nginx/ingress-nginx 参考&#xff1a;https://www.cnblogs.com/syushin/p/15271304.html 添加helm仓库 - [rootk8s-master ~]# helm repo add ingress-nginx https://kubernetes.github.io/ingress-nginx - [rootk8s-master ~]# helm repo update 下载安装…
阅读更多...
最新文章

Copyright @ 2022~2023