vue3使用-watch监听总结

2024-09-01 19:52
文章标签 javascript 总结 使用 vue vue3 监听 frontend watch

本文主要是介绍vue3使用-watch监听总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

watch
watch(attr, (val1, val2) => {}, {deep: true, immediate: true, flush: 'post', once: true, onTrack / onTrigger
})

attr: 基本类型可以直接监听，引用类型需要用函数返回监听(不能直接侦听响应式对象的属性值)，可以监听多个

(newVal1, oldVal) => {}: newVal1是改变后新的值, oldVal是改变前旧的值

{deep: true, immediate: true, flush: 'post'}：deep是深度监听；immediate创建实例后立即执侦听器；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；onTrack / onTrigger：调试侦听器的依赖关系;once:true,当 attr 变化时，仅触发一次

监听单个值或多个值

监听单个值

示例1：

<template><div><h2>watch监听-基本数据</h2><div :style="{color: nowColor}">字体颜色+count{{ count }}</div><el-button @click="handleAdd">改变</el-button></div>
</template>
​
<script setup>
import { watch } from 'vue';
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const nowColor = ref(colors[count.value])
// 后端返回的数据
watch(count, (newVal, oldVal) => {if(newVal !== oldVal) {console.log(newVal, oldVal);nowColor.value = colors[count.value]}
})
function handleAdd() {if (count.value < colors.length - 1) {count.value += 1}
}
</script>

示例2：监听对象下某个值的变动

<script setup>
import {ref, watch, reactive } from 'vue'
const data = reactive({updateTitle: '测试改变'
})
const user =  ref({name: '张三',age: 28
})
// watch(user.value.age, (newVal, val) => {}) 这样监听没用,因为监听的是引用类型
// watch(user.value, (newVal, val) => {}) 这样监听也没用,因为监听的是引用类型
watch(() => user.value.age, (newVal, val) => {console.log(newVal, val);if (newVal !== val) {data.updateTitle = '哈哈'}
}, {deep: true
})
</script>

监听多个值

示例1：多个值进行累加，有个值变了就调用

<template><div><h2>watch监听-基本数据</h2><div :style="{color: nowColor}">字体颜色+count{{ count }}</div><el-button @click="handleAdd">改变</el-button></div>
</template>
​
<script setup>
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const num = ref(2)
const nowColor = ref(colors[count.value])
// 后端返回的数据
watch(() => count.value + num.value, (newVal, oldVal) => {console.log('newVal', newVal);if(newVal > colors.length) {nowColor.value = colors[colors.length - 1]}
})
function handleAdd() {count.value += 1
}
</script>

基本数据类型-监听多个值：对某个值进行判断

<script setup>
// newN对应的是num, newC对应的是count
watch([num, count], ([newN, newC]) => {console.log('newVal', newC);if(newC > colors.length) {nowColor.value = colors[colors.length - 1]}
})
</script>

示例2

<template><div><h2>watch绑定数组或对象并多个值</h2>输入姓名：<input type="text" v-model="queryParams.name" /><hr />输入每页条数：<input type="text" v-model="queryParams.size" /></div>
</template>
​
<script setup>
import { reactive, watch } from 'vue'
const queryParams = reactive({name: 'zhangsan',size: 10,page: 1
})
// 实现只要改变name和size，则执行回调
watch(() => [queryParams.name, queryParams.size],([val, val2]) => {console.log('姓名是:', val, '每页条数是:', val2)}
)
</script>
监听整个对象或数组的变化

监听对象

实现监听整个对象之使用reactive，只要对象下某个值变动就请求

<template><div><h2>watch绑定数组或对象并多个值</h2>输入姓名：<input type="text" v-model="queryParams.name" /><hr />输入每页条数：<input type="text" v-model="queryParams.size" /></div>
</template>
​
<script setup>
import { reactive, watch } from 'vue'
const queryParams = reactive({name: 'zhangsan',size: 10,page: 1
})
// 这样监听不了整个对象的变化，也不能监听到具体的值
// watch(() => queryParams,(val) => {console.log('发生数据变化了:', val)})
// // watch([() => queryParams],(val) => {console.log('发生数据变化了:', val)})
​
// 实现监听对象下的数值变化就请求接口，监听单个对象
watch(queryParams, (val) => {console.log('发生数据变化了:', val)
})
// or 或者下面这样,如果要监听多个对象，就使用下面这种，在数组里面添加一个需要监听的参数
/* watch([queryParams], (val) => {console.log('发生数据变化了:', val)
})*/
</script>

换成ref只要watch加个.value

<script>
import { ref, watch } from 'vue'
const queryParams = ref({name: 'zhangsan',size: 10,page: 1
})
watch(queryParams.value, (val) => {console.log('发生数据变化了:', val)
})
</script>

监听数组

ref监听数组的方式-示例

<template><div><h2>watch绑定数组或对象并多个值</h2><div>数组长度是：{{ resultLength }}</div></div>
</template>
​
<script setup>
import { onMounted, ref, watch } from 'vue'
const resultData = ref([])
// 数组长度
const resultLength = ref(0)
​
onMounted(() => {resultData.value = [1, 2, 3, 4, 5]
})
// 下面是两种监听方式
watch(() => resultData.value,(val) => {resultLength.value = val.length}
)
// 这样监听不需要.value,打印.value就会失去作用
watch(resultData, (val) => {console.log('发生数据变化了:', val)
})
</script>

reactive监听数组的方式-示例

<template><div><h2>watch绑定数组或对象并多个值</h2><div>数组长度是：{{ resultLength }}</div></div>
</template>
​
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
const data = reactive({resultData: []
})
// 数组长度
const resultLength = ref(0)
​
onMounted(() => {data.resultData = [1, 2, 3, 4, 5]
})
// 下面是两种监听方式
watch(() => data.resultData,(val) => {resultLength.value = val.length}
)
watch([() => data.resultData], (val) => {console.log('发生数据变化了:', val)
})
​
// 这样监听不起作用
watch(data.resultData,(val) => {console.log('发生数据变化了:', val)})
watch([data.resultData],(val) => {console.log('发生数据变化了:', val)})
</script>
监听函数的变化
<template><div><input type="number" v-model="count" /><p>是否为偶数？{{ isEven() }}</p><div>count2: {{ count2 }}</div><button @click="count2++">+1</button></div>
</template>
​
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const count2 = ref(0)
​
// 注意这个函数本身，是每次重新渲染的时候都会重新执行的
function isEven() {console.log('isEvent 函数被重新执行了')if (count2.value === 5) {return 'this is a test'}return count.value % 2 === 0
}
// 设置侦听器
// 这里侦听的是函数的返回值结果
// 如果函数返回值发生变化，就会触发侦听器回调函数
watch(isEven, () => {console.log('触发了侦听器回调函数')
})
</script>
​
<style scoped></style>
监听计算属性的变化
<template><div><input type="text" v-model="firstName" placeholder="first name" /><input type="text" v-model="lastName" placeholder="last name" /><p>全名：{{ fullName }}</p></div>
</template>
​
<script setup>
import { ref, computed, watch } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
​
// 设置侦听器
watch(fullName, (newVal, oldVal) => {console.log(`new: ${newVal}, old: ${oldVal}`)
})
</script>
​
<style scoped></style>

watchEffect

不需要再指定需要依赖的值，会自动追踪依赖的值

flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'

flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发

<template><div><h2>wwatchEffect监听</h2><div :style="{color: nowColor}">字体颜色+count{{ count }}</div><el-button @click="handleAdd">改变</el-button></div>
</template>
​
<script setup>
​
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
​
const count = ref(0)
const nowColor = ref(colors[count.value])
watchEffect(() => {if(count.value < colors.length) {nowColor.value = colors[count.value]}
}, {flush: 'post'
})
​
function handleAdd() {count.value += 1
}
</script>
watchPostEffect

watchEffect()使用 flush: 'post' 选项时的别名。

watchSyncEffect

watchEffect() 使用 flush: 'sync' 选项时的别名。

这篇关于vue3使用-watch监听总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1127894。

相关文章

Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
JSON Web Token在登陆中的使用过程

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》：本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录，生成 JWT2. 自定义过滤
阅读更多...
Java中StopWatch的使用示例详解

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类，使用它
阅读更多...
Java使用Curator进行ZooKeeper操作的详细教程

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3
阅读更多...
springboot security使用jwt认证方式

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》：本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一
阅读更多...
go中空接口的具体使用

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口？2. 如何使用空接口？第一，第二，第三，3. 空接口几个要注意的坑坑1：坑2：坑3：接口-空接口1. 什么是空接
阅读更多...
springboot security快速使用示例详解

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》：本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s
阅读更多...
Python如何使用__slots__实现节省内存和性能优化

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景：内存吃得满满的类__slots__：你的内存管理小助手举个大概的例子：看看效果如何？1.
阅读更多...
java中使用POI生成Excel并导出过程

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》：本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注：本文章中代码均为
阅读更多...
Spring Boot3虚拟线程的使用步骤详解

Spring Boot3虚拟线程的使用步骤详解

《SpringBoot3虚拟线程的使用步骤详解》虚拟线程是Java19中引入的一个新特性,旨在通过简化线程管理来提升应用程序的并发性能,：本文主要介绍SpringBoot3虚拟线程的使用步骤,... 目录问题根源分析解决方案验证验证实验实验1：未启用keep-alive实验2：启用keep-alive扩展建
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2