Vue3的侦听器是如何通过响应式原理实现长尾词自动追踪与更新的？

本文共计1828个文字，预计阅读时间需要8分钟。

目录+侦听响应式对象+侦听属性值+侦听获取新旧值+实现效果+前言：本篇内容基于Vue3计算属性是如何实现的。侦听响应式对象+前面我们聊到Vue3计算属性，它可以自动+计算并缓存结果+侦听响应式对象+侦听属性值+侦听获取新旧值+实现效果

目录

• 侦听响应式对象
• 侦听属性值
• 侦听获取新值和旧值
• 实现效果

前言：

本篇内容基于Vue3计算属性是如何实现的实现。

侦听响应式对象

前面我们聊到计算属性，它可以自动计算并缓存响应式数据的值。而如果我们仅需要在响应式数据变化时，执行一些预设的操作，就可以使用watch侦听器。我们还是先来实现一个最简单的例子，然后来一点一点扩充它。

const data = {foo: 1} const obj = reactive(data) watch(obj, () => { console.log('obj已改变') })

在这个例子中，我们使用了watch侦听器，当obj的属性被改变时，控制台应该会打印出obj已改变。基于前面我们对计算属性的实现，这里我们已经有了一个大概的思路。把watch视为响应式对象的副作用函数，当响应式对象改变时，触发执行该副作用函数。