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 的引用更改时触发。
