当前位置：首页 > news >正文

vue3使用-watch监听总结

news 来源：原创 2024/9/20 8:15:44

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>