Vue3中的watch如何使用

这篇文章主要介绍“Vue3中的watch如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3中的watch如何使用”文章能帮助大家解决问题。

成都创新互联公司是专业的沙县网站建设公司，沙县接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沙县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、watch的基本实例

 

import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
  }
})

 

二、watch监听多个数据

getter 函数：

 

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}`);
  }
);

 

多个来源组成的数组

 

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}`);
  }
);

 

三、watch监听对象的值

 

import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})

 

四、watch监听器的配置参数

1.deep

用于开启深度监听

 

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

 

2.immediate

是否开启初始化检测，默认是值发生变化时，才会执行监听器里面的方法，开启immediate后初始化就执行一次。

 

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

 

五、通过watchEffect()简化watch

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

 

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 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为：

 

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);
})

 

注：需要注意的是watchEffect 回调会立即执行，不需要指定immediate

六、watch vs. watchEffect

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

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

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

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

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

停止监听

在 setup() 或