08. Vue3中Watch的使用和注意事项
Vue2 中也有watch
-监听器(侦听器),作用是用来侦测响应式数据的变化,并且可以得到newValue
新值和oldValue
老值。如果你熟悉 Vue2 一定熟悉这个函数,但在 Vue3 中watch
有了一些细微的变化,我们来学习一下。
修改标题引出的需求和界面修改
现在我们的“北海九号主题餐厅”的老板有新的需求了,当你点击按钮,点餐完毕,WEB 标题也要跟着改变,这时候你好像没办法变成自动相应,双向绑定了。今天的主角就排上用场了,watch
监听器隆重登场。
类似的情况也会有,比如根据值的变化,进行网络请求,根据值的变化进行组件的生成和销毁(我们经常称为这类操作为副作用)。把这类需求写在watch
监听器里就是不错的选择。
在写代码之前,你可以删除前两节学习生命周期时的钩子函数,让代码变得干净一些。
现在你可以先作一个按钮的响应值和改变值的方法,并写在setup()
函数中,这里我使用了 ref 来生成响应式数据,你可以跟着我一起复习一下。
{ //..... const overText = ref("北海九号"); const overAction = () => { overText.value = overText.value + "点餐完成 | "; }; return { ...refData, overText, overAction}; }
写完 js 代码后,在template
模板中,编写下面的代码,这样可以在点击按钮时,调用overAction
函数。
<div><button @click="overAction">点餐完毕</button></div> <div>{{ overText }}</div>
现在完成老板的需求,我们在改变的时候直接用 js 修改 WEB 的 title。
const overAction = () => { overText.value = overText.value + "点餐完成 | "; document.title = overText.value; };
都完成后,可以到浏览器中看一下你写的效果。发现我们写的根本没有用处,跟我们想的一点都不一样。这时候就需要 Watch 来救场啦。
watch 监听器的实现
使用 watch 同样需要先进行导入。
import {... , watch} from "vue"
引入后编写 watch 函数,它接受两个参数,第一个是要监听的值,这里是overText
,然后是一个回调函数。在函数中你可以获得到新值和老值。
watch(overText, (newValue, oldValue) => { document.title = newValue; });
为了看到效果,我用console.log
输出一下新值和老值。
watch(overText, (newValue, oldValue) => { console.log(`new--->${newValue}`); console.log(`old--->${oldValue}`); document.title = newValue; });
watch 多个值时
当你要监听多个值的时候,不是写多个watch
函数,而是要传入数组的形式。比如现在我们同时要监听data
中你选择了那个女孩,也就是selectGirl
时,我们可以使用数组的形式。
我们把程序写成这个样子,然后到浏览器中预览。
watch([overText, data.selectGirl], (newValue, oldValue) = >{ console.log(`new--->${newValue}`); console.log(`old--->${oldValue}`); document.title = newValue[0]; //返回的 newValue 也是一个数组 });
发现报错了,它告诉我们可以用一个函数解决reactive
中的值的问题。把程序写成这个下面的样子就不报错了。
watch([overText, () => data.selectGirl], (newValue, oldValue) => { console.log(`new--->${newValue}`); console.log(`old--->${oldValue}`); document.title = newValue[0]; });
现在程序就可以正常运行了,有人会说 Vue3 不能监听reactive
里边的值是不是一个 Bug,我想说的这并不是 Bug,而是为了保持和 Vue2 的一致性,因为在 Vue2 中也是这种结果,解决方案是要么是ref
或者这种get/set
方法的形式。要么你你开启设置watchOptions
的 deep 为 true,也就是深度监听模式。
码云笔记 » 08. Vue3中Watch的使用和注意事项