08. Vue3中Watch的使用和注意事项

目录
文章目录隐藏
  1. 修改标题引出的需求和界面修改
  2. watch 监听器的实现
  3. 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,也就是深度监听模式。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 08. Vue3中Watch的使用和注意事项

发表回复