🗒️vue3源码学习-8-watch
2022-6-19
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

本文学习编写watch功能函数。首先,先去使用下官方的watch做一些简单的小功能测试。
上面尝试了3中方式,结果发现第三种不触发打印,因为你监听的是数值1,一个常量就不会有改变的情况。 另外如果你监听一个对象,例如state.address这样的,那也不会触发打印。因为这个对象是引用类型,也就是在内存中的地址也没改变,你就是改变了对象属性的值,他监听不到改变。 第二种写法是比较优的方式。

编写watch

在上述官方的使用过程中,watch接受了2个参数。
  • 用户需要监听的参数,可能是函数也可能是一个reactive对象
  • 用户传入的回调函数
当需要监听的数据改变的时候,触发回调函数。那么实际上就相当于给监听的数据的属性绑定一个effect,做一个依赖收集,这样当数据改变,就触发用户的回调函数。 那么第一步对传入的数据做判断,如果是reacvtive就遍历数据对象,然后每个属性做依赖收集 如果是函数的话,就不用遍历。
这就是一个简单的watch函数。在wathc官方用法中,还遇到这样一种情况。例如input上面你输入文字然后进行接口调用搜索关键字,你输入了2个子。那么当第一个接口的延迟是2秒中之后返回数据,第二个文字接口在500毫秒返回数据。由于接口的调用是并行的。那么最终会才用第一个接口的数据,第二个比第一个快,导致被覆盖了,这是不正确的。 正常的做法有用防抖来做,那么vue官方提供了一个onCleanup回调函数。 当数据改变引起变化的时候,会调触发上一个watch回调的oncleanup。这样就能通过一些操作来渲染正确的数据。
上面的分析,就是在触发回调函数的时候触发上一个watch中的onCleanup函数。 对watch增加一些功能,记录一下用户的onCleanup函数内容。

针对props中数组的监听

在实际项目中常常需要编写组件,其中组件需要通过props接受参数。然后会遇到监听这些参数的改变做一些操作。那么就会遇到数组这种结构。
如果传入的数组使用reactive包裹的会出现写法一和写法三无法触发。 但是如果是ref包裹的,那么这段代码中,无法更改的是写法二,因为在 watch API 中,它只接受一个响应式对象作为第一个参数,而不能是一个 getter 函数。因此,写法一和写法三都是可以正常工作的,它们都会在 props.list 变化时触发 watch 回调函数并打印新的值。但是,写法三使用了一个新的数组,而不是原始的 props.list 数组,这意味着在数组中添加、删除或替换元素时,watch 回调函数将会触发。相比之下,写法一和写法二将只在 props.list 的引用更改时触发。
  • TypeScript
  • Vue
  • vue3源码学习-9-ref的实现vue3源码学习-7-computed的实现
    • Waline
    目录