这篇文章主要介绍“Vue3中的watch如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中的watch如何使用”文章能帮助大家解决问题。
<template>
<div>
<div>{{ count }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
count.value++
}
watch(count,(newValue,oldValue)=>{
if(newValue){
console.log(`我侦听到了count状态的变化,当前值为${newValue},从而处理相关逻辑`);
}
})
</script>
<style>
</style>
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
() => x.value + y.value,
(sum) => {
console.log(`我是x与y之和${sum}`);
}
);
</script>
<style>
</style>
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
[x,y],
([x,y]) => {
console.log(`我是x=>${x},我是y=》${y}`);
}
);
</script>
<style>
</style>
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
console.log(name);
})
</script>
<style>
</style>
用于开启深度监听
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象,当不开启深度监听的时候,监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true })
</script>
<style>
</style>
是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象,当不开启深度监听的时候,监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
<style>
</style>
侦听器的回调使用与源完全相同的响应式状态是很常见的。例如:
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(obj.value,()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>
我们可以使用watchEffect 函数来简化上面的代码。watchEffect()
允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为:
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// watch(obj.value,()=>{
// console.log(obj.value.name);
// })
watchEffect(()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>
注:需要注意的是watchEffect 回调会立即执行,不需要指定immediate
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。
watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 选项:
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})
停止监听
在 setup() 或 <script setup> 中用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件卸载时自动停止。因此,在大多数情况下,你无需关心怎么停止一个侦听器。
一个关键点是,侦听器必须用同步语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。如下方这个例子:
// ...当该侦听器不再需要时
unwatch()
关于“Vue3中的watch如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。