1. 定义监听器
//要监视的属性被改变时触发
watch(
要监视的属性,
(更改后的心值, 更改前的旧值) => {
具体操作
},
);
//监视对象为getter的时候
//表达式内任意响应式属性被改变时触发
watch(
() => return表达式,
(表达式的新值, 表达式的旧值) => {
具体操作
}
);
//数组中任意下标数据被改变时触发
watch(
value1, value2,....],
([value1改变后的值, value2改变后的值,...valuen改变后的值]) => {
具体操作
}
);
//对象内任意属性被改变时
watch(obj对象, (对象的新值, 对象的旧值) => {
具体操作,但需要注意这时对象的新值和对象的旧值是相等的,显示对象新值
});
//当对象下某个属性发生改变时,监视对象下某一属性
watch(
() => 对象的属性,
(对象属性的新值, 对象属性的旧值) => {
具体操作
}
);
//使用watchEffect监视
watchEffect(()=>{
函数式,在函数式中定义的属性被改变时触发
})
2. 监听器的配置项
开启深层监听:deep: true
强制监视器立即执行:immediate: true
一次性监听:once: true
监听器回调中访问被vue更新之后的所有组件dom:flush: ‘post’
同步触发监听器,会在Vue进行任何更新之前触发:flush: ‘sync’
3. 监听器实例
<template>
<div>{{ count }}</div>
<br />
<button @click="addcount">count++</button>
<br />
<div>{{ obj.nums }}</div>
<br />
<button @click="addobjnums">obj.nums++</button>
<br>
<button @click="addobjnums2">obj.nums2++</button>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
name: "App";
let count = ref(0);
let x = ref(5);
let obj = reactive({
nums: 1,
nums2: 2,
});
//使用immediate: true 配置项实现在页面初始化时就执行此监视属性
watch(
count,
(newValue, oldValue) => {
console.log("---------这个是页面初始化出来的/如果你第二次看见我则是count值发生改变时看到的------");
console.log("count原始值:", oldValue);
console.log("count更改后的值:", newValue);
},
{ immediate: true }
);
//单纯监视count是否有变化,
//监视函数会获得俩个参数,第一个为更新后的值,第二个为更新前的值
watch(count, (newValue, oldValue) => {
console.log("----------------------------监视单个ref-----------------------");
console.log("count原始值:", oldValue);
console.log("count更改后的值:", newValue);
});
//监视对象为getter的时候
watch(
() => count.value + x.value,
(newValue, oldValue) => {
console.log(
"----------------------------监视getter函数-----------------------"
);
console.log("getter原始值:", oldValue);
console.log("count更改后getter函数的值:", newValue);
}
);
//监视对象来源于一个数组,没有找到获取原来值的写法
watch([count, () => x.value + 1], ([newCount, newX]) => {
console.log(
"-----------------------监视多个来源组成的数组-------------------"
);
console.log("count更改后的值:", newCount);
console.log("x+1后的值:", newX);
});
//当监视对象为整个对象时
//这时newValue和oldValue是相等的,因为是同一个对象
watch(obj, (newValue, oldValue) => {
console.log(
"----------------------------监视整个对象时-----------------------"
);
console.log("obj原始值:", oldValue);
console.log("obj更改后的值:", newValue);
});
//当监视对象为对象属性时,需监视其对象属性的getter函数
//这个触发条件仅仅是obj.nums被修改的时候出发
watch(
() => obj.nums,
(newValue, oldValue) => {
console.log(
"----------------------------监视对象下单个属性-----------------------"
);
console.log("obj.nums原始值:", oldValue);
console.log("obj.nums更改后的值:", newValue);
}
);
//看起来是监视了obj对象下的nums属性,
//其实是通过deep:true选项开启了深层监听器
//其返回的原值和新值为obj对象的值,而不是obj.nums单个
//注意这个非常耗费资源,是遍历实现的
watch(
() => obj.nums,
(newValue, oldValue) => {
console.log(
"------------开启深层监听器检测obj下的所有属性只要其中一个发生改变就会输出整个obj对象------------"
);
console.log("obj原始值:", oldValue);
console.log("obj更改后的值:", newValue);
},
{ deep: true }
);
//使用once: true 配置项实现此监视只执行一次
watch(
count,
(newValue, oldValue) => {
console.log("---------这个只会看到一次------");
console.log("count原始值:", oldValue);
console.log("count更改后的值:", newValue);
},
{ once: true }
);
//使用watchEffect可以不写监视属性
//在匿名函数中存在的属性被修改时会触发
watchEffect(()=>{
count.value++
})
function addcount() {
count.value++;
}
function addobjnums() {
obj.nums++;
}
function addobjnums2() {
obj.nums2++;
}
</script>
<style scoped>
</style>
4. 监听器其他
watchEffect()
const todoId = ref(1)
const data = ref(null)
watch(
todoId,
async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
},
{ immediate: true }
)
使用watchEffect()函数后
watchEffect(async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json()
})
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
Post Watchers
如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: ‘post’ 选项：
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})
后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：
import { watchPostEffect } from 'vue'
watchPostEffect(() => {
/* 在 Vue 更新后执行 */
})
同步侦听器
你还可以创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发：
watch(source, callback, {
flush: 'sync'
})
watchEffect(callback, {
flush: 'sync'
})
同步触发的 watchEffect() 有个更方便的别名 watchSyncEffect()：.
import { watchSyncEffect } from 'vue'
watchSyncEffect(() => {
/* 在响应式数据变化时同步执行 */
})
停止侦听器
在 setup() 或
一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：
<script setup>
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
watchEffect(() => {})
}, 100)
</script>
要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：
const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()
注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 数据加载后执行某些操作...
}
})
