/* ... */
})
watch多个来源
观察者还可以使用数组同时监视多个源：
const me = reactive({ age: 24, name: 'gk' })
// reactive类型的
watch(
[() => me.age, () => me.name], // 监听reactive多个数据源，可以传入一个数组类型，返回getter函数
([age, name], [oldAge, oldName]) => {
console.log(age) // 新的 age 值
console.log(name) // 新的 name 值
console.log(oldAge) // 旧的 age 值
console.log(oldName) // 新的 name 值
},
// options
{
lazy: true //默认 在 watch 被创建的时候执行回调函数中的代码，如果lazy为true ，怎创建的时候，不执行！
}
)setInterval(() => {
me.age++
me.name = 'oldMe'
}, 7000000)
// ref类型的
const work = ref('web')
const addres = ref('sz')
watch(
[work,address], // 监听多个ref数据源
([work, addres], [oldwork, oldaddres]) => {
//......
},
{
lazy: true
}
)
watch和组件的生命周期绑定，当组件卸载后，watch也将自动停止。在其他情况下，它返回停止句柄，可以调用该句柄以显式停止观察程序：
// watch 返回一个函数句柄，我们可以决定该watch的停止和开始！
const stopWatch = watch(
[work,address], // 监听多个ref数据源
([work, addres], [oldwork, oldaddres]) => {
//......
},
{
lazy: true
}
)// 调用停止函数，清除对work和address的监视
stopWatch()
在 watch 中清除无效的异步任务
<div class="search-con">
<svg-icon class="search-icon" icon-class="search"></svg-icon>
<input v-focus placeholder="搜索、关键词" v-model="searchText" />
</div>
setup(props, { attrs, slots, parent, root, emit, refs }){
const CancelToken = root.$http.CancelToken
const source = CancelToken.source()
// 定义响应式数据 searchText
const searchText = ref('') // 向后台发送异步请求
const getSearchResult = searchText => {
root.$http.post("http://test.happymmall.com/search",{text:searchText}, {
cancelToken: source.token
}).then(res => {
// .....
});
return source.cancel
}
// 定义 watch 监听
watch(
searchText,
(searchText, oldSearchText, onCleanup) => {
// 发送axios请求，并得到取消axios请求的 cancel函数
const cancel = getSearchResult(searchText)
// 若 watch 监听被重复执行了，则会先清除上次未完成的异步请求
onCleanup(cancel)
},
// watch 刚被创建的时候不执行
{ lazy: true }
)
