文章目录
Watch侦听器
在Vue3中，watch特性进行了一些改变和优化。与computed不同，watch通常用于监听数据的变化，并执行一些副作用，例如发送网络请求、更新DOM等。本文将介绍Vue3中watch特性。
1. 基础概念
1.1. Watch的基本用法
watch(source, callback, options?)
其中，source表示要监听的数据，可以是一个响应式的数据对象、一个计算属性或一个方法的返回值；callback表示当数据发生变化时要执行的回调函数；options表示watch的一些配置选项，例如immediate、deep、flush等。
例子1：监听单个ref的值，直接监听
<template>
<div>
<!-- 侦听单个变量 -->
case1：<input v-model="userName" type="text">
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue';
const userName= ref<string>('张三');
watch(userName, (newVal, oldVal) => {
console.log(newVal, oldVal);
})
</script>
例子2：监听多个ref的值，采用数组形式
<template>
<div>
<!-- 侦听多个变量 -->
case1：<input v-model="userName" type="text">
case2：<input v-model="age" type="text">
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue';
const userName= ref<string>('张三');
const age= ref<number>(18);
watch([userName, age], (newVal, oldVal) => {
console.log(newVal, oldVal);
})
</script>
例子3：深度监听
- 如果用
ref实现深层次对象的响应式，侦听的时候需要开启深度侦听 - 用
reactive实现响应式，开启deep和不开启deep效果是一样的
<template>
<div>
<!-- 深度侦听 -->
case1：<input v-model="obj.foo.bar.name" type="text">
</div>
</template>
<script setup lang="ts">
import {
reactive, watch } from 'vue';
const obj = reactive({
foo: {
bar: {
name: '张三'
}
}
})
watch(obj, (newVal, oldVal) => {
console.log(newVal, oldVal);
}, {
// deep: true, // 深度侦听, 监听ref创建的响应式对象必须开启
})
</script>
注意：此处监听的新值和旧值相同，主要是因为新旧值引用地址是相同的，此处可采取computed计算属性先实现深拷贝。示例如下：
import {
reactive, watch, computed } from 'vue';
const obj = reactive({
foo: {
bar: {
name: '张三'
}
}
})
let obj1 = reactive({
})
obj1 = computed(() => {
return JSON.parse(JSON.stringify(obj))
})
watch(obj1, (newVal, oldVal) => {
console.log(newVal, oldVal);
})
例子4：监听reactive响应式对象单一属性，采用回调函数的形式
<template>
<div>
<!-- 侦听单一属性 -->
case1：<input v-model="obj.foo.bar.name" type="text">
</div>
</template>
<script setup lang="ts">
import {
reactive, watch } from 'vue';
const obj = reactive({
foo: {
bar: {
name: '张三'
}
}
})
watch(
() => obj.foo.bar.name,
(newVal, oldVal) => {
console.log(newVal, oldVal);
}
)
</script>
2. Watch的高级用法
在Vue3中，watch特性进行了一些改变和优化。除了基本的watch用法外，还有一些高级用法可以使watch更加灵活和方便。下面是几个常用的高级用法：
2.1. immediate
immediate选项可以用于指定watch在组件创建时立即执行一次回调函数，而不必等待数据的变化。例如：
import {
reactive, watch } from 'vue'
const state = reactive({
count: 0
})
watch(
() => state.count,
(newVal, oldVal) => {
console.log(`count值从${
oldVal}变成了${
newVal}`)
},
{
immediate: true }
)
在上面的例子中，我们使用immediate选项将watch的回调函数在组件创建时立即执行了一次，输出了初始值。当state.count变化时，watch的回调函数还会被再次执行。
2.2. deep
deep选项可以用于深度监听一个对象或数组的变化。当我们监听一个对象或数组时，默认情况下只会监听对象或数组的引用变化，而不会监听其内部数据的变化。如果我们需要深度监听对象或数组内部数据的变化，可以使用deep选项。例如：
import {
reactive, watch } from 'vue'
const state = reactive({
todos: [
{
id: 1, text: '学习Vue3', done: false },
{
id: 2, text: '学习React', done: false },
{
id: 3, text: '学习Angular', done: true }
]
})
watch(
() => state.todos,
(newVal, oldVal) => {
console.log(`todos数组发生了变化`)
},
{
deep: true }
)
state.todos[0].done = true // 输出：todos数组发生了变化
注意：当我们使用deep选项时，watch的性能会受到一定的影响，因为Vue需要对对象或数组进行递归遍历。因此，只有在必要的情况下才应该使用deep选项。
2.3. flush
flush选项可以用于指定watch的回调函数在何时执行。例如：
- sync：同步模式下执行
- pre：在数据变化之前执行回调函数
- post：在数据变化之后执行回调函数，但是需要等待所有依赖项都更新后才执行
import {
reactive, watch } from 'vue'
const state = reactive({
count: 0
})
watch(
() => state.count,
(newVal, oldVal) => {
console.log(`count值从${
oldVal}变成了${
newVal}`)
},
{
flush: 'sync' }
)
state.count++ // 输出：count值从0变成了1
在上面的例子中，我们使用flush选项将watch的回调函数在同步模式下执行了，这意味着watch的回调函数会在数据变化之后立即执行。当我们执行state.count++时，会触发count的变化，从而执行watch的回调函数并输出变化的值。
3. Watch的性能优化
在使用watch时，为了优化性能，我们可以采取以下一些方法：
3.1. 使用computed代替watch
在有些情况下，如果我们只是想监听一个值的变化，并在变化时执行一些操作，我们可以使用computed代替watch。computed可以自动缓存计算的结果，只有在它的依赖项变化时才会重新计算，因此可以提高一定的性能。例如：
import {
reactive, computed } from 'vue'
const state = reactive({
count: 0
})
const doubleCount = computed(() => {
return state.count * 2
})
console.log(doubleCount.value) // 输出：0
state.count++
console.log(doubleCount.value) // 输出：2
3.2. 使用throttle和debounce控制回调函数的执行频率
在有些情况下，我们可能会频繁地监听一个值的变化，并在变化时执行一些操作。如果回调函数执行的太频繁，会影响性能。为了避免这种情况，我们可以使用throttle和debounce控制回调函数的执行频率。
throttle和debounce都是用于控制函数执行频率的工具函数。throttle可以用于控制函数在一定时间内只能执行一次，而debounce可以用于控制函数在一定时间内不会连续执行。例如：
import {
reactive, watch } from 'vue'
import {
throttle } from 'lodash-es'
const state = reactive({
count: 0
})
watch(
() => state.count,
throttle((newVal, oldVal) => {
console.log(`count值从${
oldVal}变成了${
newVal}`)
}, 1000)
)
state.count++
总结
watch特性是Vue中非常重要的一个特性，通过学习watch的基础概念、高级用法、实战应用和性能优化方法，可以帮助我们更好地理解和应用Vue。