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,也就是深度监听模式。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 08. Vue3中Watch的使用和注意事项

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们