Vue3源码中侦听器watch实现原理是什么？

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

目录 + watch 的本质 + watch 的函数签名 + 监听多个源 + 监听单一源 + watch 的实现 + watch 函数 + source 参数 + cb 参数 + options 参数 + doWatch 函数 + doWatch 函数签名 + 初始化变量 + 递归读取响应式数据 + 定义清除副作用

目录

• watch 的本质
• watch 的函数签名
• 侦听多个源
• 侦听单一源
• watch 的实现
• watch 函数
• source 参数
• cb 参数
• options 参数
• doWatch 函数
• doWatch 函数签名
• 初始化变量
• 递归读取响应式数据
• 定义清除副作用函数
• 封装 scheduler 调度函数
• 设置 job 的 allowRecurse 属性
• flush 选项指定回调函数的执行时机
• 创建副作用函数
• 执行副作用函数
• 返回匿名函数，停止侦听
• 总结

watch 的本质

所谓的watch，其本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。