Vue3中watch的使用-个人笔记

simple_du
178 阅读2分钟

注：本文是个人使用小记，如有不对的地方请指正本人会更改，本人技术菜，大佬勿喷

由于Vue3中不再使用Options API也就是选项式API，开始使用Composition API,所以书写方式上与Vue2有着明显的不同，当然如果各位写的是JSX或者React的话上手会很快。

//监听单个来源
function watch<T>( 
source: WatchSource<T>, 
callback: WatchCallback<T>,
options?: WatchOptions 
): StopHandle 
// 监听多个来源 
function watch<T>( 
sources: WatchSource<T>[],
callback: WatchCallback<T[]>,
options?: WatchOptions 
): StopHandle

这是官网给出的watch配置选项，可以监听单个来源和多个来源，看了下官网文档有点晦涩，所以选择直接上手实践，实践后的结果如下：

  1. 首先第一个参数是监听对象可以是多个也可以是个数组，如果监听的来源的声明方式是ref、defineMdel，那么就可以直接这么写watch(name,()=>,options)name就是通过ref、defineMdel所声明的变量，如果想要监听props、reactive创建的键值或者props本身，那么写法应该是watch(()=>{return props 或者 return props.key},(newVal,oldVal)=>{},options);如果想同时监听多个可以结合上面的写法直接整合成数组传入watch（[name,()=>props],cb,options）;
  2. callBack有三个参数分别是newValue、oldVale、onCleanup；在监听单个来源时newValue和oldValue和Vue2中没有太大区别，当监听来源是个数组时newValue和oldValue会以数组的形式返回，数组顺序和监听来源顺序一致，onCleanup官网给的说法式取消上一次未完成的请求，我的理解是在watch做接口调用或者其它操作时可以避免频繁点击导致借口调用频繁，有点节流和防抖的意思；
  3. options是配置项参数官网给的说明很直白，但是里面的flush、onTrack / onTrigger这两个参数没有完全弄懂，flush按照官网的说法是和dom刷新有关，这个目前没有使用过，后续如果弄明白了，会更新文章，有懂的大佬欢迎在评论区讲解，onTrack / onTrigger是用来调试监听器也就是watch的；
avatar
文章
阅读
粉丝