河北建设网站企业锁在哪下载,做微信的网站秀客,网页设计的标准尺寸,室内设计网站平台文章目录Watch侦听器1. 基础概念1.1. Watch的基本用法例子1#xff1a;监听单个ref的值#xff0c;直接监听例子2#xff1a;监听多个ref的值#xff0c;采用数组形式例子3#xff1a;深度监听例子4#xff1a;监听reactive响应式对象单一属性#xff0c;采用回调函数的…
文章目录Watch侦听器1. 基础概念1.1. Watch的基本用法例子1监听单个ref的值直接监听例子2监听多个ref的值采用数组形式例子3深度监听例子4监听reactive响应式对象单一属性采用回调函数的形式2. Watch的高级用法2.1. immediate2.2. deep2.3. flush3. Watch的性能优化3.1. 使用computed代替watch3.2. 使用throttle和debounce控制回调函数的执行频率总结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的值直接监听
templatediv!-- 侦听单个变量 --case1input v-modeluserName typetext/div
/templatescript setup langts
import { ref, watch } from vue;const userName refstring(张三);watch(userName, (newVal, oldVal) {console.log(newVal, oldVal);
})
/script
例子2监听多个ref的值采用数组形式
templatediv!-- 侦听多个变量 --case1input v-modeluserName typetextcase2input v-modelage typetext/div
/templatescript setup langts
import { ref, watch } from vue;const userName refstring(张三);
const age refnumber(18);watch([userName, age], (newVal, oldVal) {console.log(newVal, oldVal);
})
/script例子3深度监听
如果用ref实现深层次对象的响应式侦听的时候需要开启深度侦听用reactive实现响应式开启deep和不开启deep效果是一样的
templatediv!-- 深度侦听 --case1input v-modelobj.foo.bar.name typetext/div
/templatescript setup langts
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响应式对象单一属性采用回调函数的形式
templatediv!-- 侦听单一属性 --case1input v-modelobj.foo.bar.name typetext/div
/templatescript setup langts
import { reactive, watch } from vue;const obj reactive({foo: {bar: {name: 张三}}
})
watch(() obj.foo.bar.name, (newVal, oldVal) {console.log(newVal, oldVal);}
)
/script2. Watch的高级用法
在Vue3中watch特性进行了一些改变和优化。除了基本的watch用法外还有一些高级用法可以使watch更加灵活和方便。下面是几个常用的高级用法
2.1. immediate
immediate选项可以用于指定watch在组件创建时立即执行一次回调函数而不必等待数据的变化。例如
import { reactive, watch } from vueconst 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 vueconst 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 vueconst 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 vueconst state reactive({count: 0
})const doubleCount computed(() {return state.count * 2
})console.log(doubleCount.value) // 输出0state.countconsole.log(doubleCount.value) // 输出2
3.2. 使用throttle和debounce控制回调函数的执行频率
在有些情况下我们可能会频繁地监听一个值的变化并在变化时执行一些操作。如果回调函数执行的太频繁会影响性能。为了避免这种情况我们可以使用throttle和debounce控制回调函数的执行频率。
throttle和debounce都是用于控制函数执行频率的工具函数。throttle可以用于控制函数在一定时间内只能执行一次而debounce可以用于控制函数在一定时间内不会连续执行。例如
import { reactive, watch } from vue
import { throttle } from lodash-esconst state reactive({count: 0
})watch(() state.count,throttle((newVal, oldVal) {console.log(count值从${oldVal}变成了${newVal})}, 1000)
)state.count
总结
watch特性是Vue中非常重要的一个特性通过学习watch的基础概念、高级用法、实战应用和性能优化方法可以帮助我们更好地理解和应用Vue。
