Vue3中watch的最佳用法

更新时间：2023年04月07日 11:54:23 作者：勇敢小陈

这篇文章主要给大家介绍了关于Vue3中watch用法的相关资料,文章中有详细的代码示例,需要的朋友可以参考下

一、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>

二、watch监听多个数据

getter 函数：

<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>

三、watch监听对象的值

<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>

四、watch监听器的配置参数

1.deep

用于开启深度监听

<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>

2.immediate

是否开启初始化检测，默认是值发生变化时，才会执行监听器里面的方法，开启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>

五、通过watchEffect()简化watch

侦听器的回调使用与源完全相同的响应式状态是很常见的。例如：

<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 vs. watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

七、回调触发机制与停止监听器

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

watch(source, callback, {
  flush: 'post'
})
 
watchEffect(callback, {
  flush: 'post'
})

停止监听

在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，你无需关心怎么停止一个侦听器。

一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：

// ...当该侦听器不再需要时
unwatch()

到此这篇关于Vue3中watch的最佳用法的文章就介绍到这了,更多相关Vue3中watch的用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3
watch

element中使用formdata进行上传文件的方法
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
解决vue-cli项目webpack打包后iconfont文件路径的问题
今天小编就为大家分享一篇解决vue-cli项目webpack打包后iconfont文件路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue mergeProps用法详细讲解
这篇文章主要介绍了Vue mergeProps用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
vue实现input文本框只能输入0-99的正整数问题
这篇文章主要介绍了vue实现input文本框只能输入0-99的正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue项目WebPack打包删除注释和console
这篇文章主要介绍了Vue项目WebPack打包删除注释和console，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue 实现一个简单的鼠标拖拽滚动效果插件
这篇文章主要介绍了Vue 实现一个简单的鼠标拖拽滚动效果插件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue自定义指令用法经典实例小结
这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
2019-03-03
vue如何修改el-form-item中的label样式修改问题
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue关于自定义事件的$event传参问题
这篇文章主要介绍了Vue关于自定义事件的$event传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10