vm.$watch的内部原理

最新推荐文章于 2024-09-09 19:36:19 发布

Tand.

最新推荐文章于 2024-09-09 19:36:19 发布

阅读量742

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45847735/article/details/122128268

版权

本文详细解析了Vue.js中vm.$watch的工作原理，包括其用法、参数选项、内部实现以及deep和immediate选项的原理。$watch实际上是通过watcher对象来实现的，watcher作为中介，在数据变化时负责通知回调。文章还介绍了如何实现watcher的取消观察功能，以及如何通过traverse处理deep监听，确保能够监听到所有子值的变化。

摘要由CSDN通过智能技术生成

在介绍内部原理前，先简单回顾一下它的用法：

1. 用法：

vm.$watch(expOrFn, callback, [options])
参数分析：

{String| Function} expOrFn

{Function | Object} callback

{Object} [options] =>①{boolean} deep ②{boolean} immediate

返回值：{Function} unwatch
用法：用于观察一个表达式或computed函数在vue.js实例上的变化。回调函数调用时，会从参数得到新数据(new value)和旧数据(old value)。表达式只接受以点分割的路径，例如：a.b.c，如果是一个复杂的表达式，可以用函数代替。
例如：
vm.watch('a.b.c', function(newVal, oldVal){}
vm.$watch返回一个取消观察函数，用来停止触发回调。
var unwatch = vm.$watch('a', (newVal, oldVal)=>{}) //之后调用取消观察：unwatch();
最后，简要介绍一下[option]的俩个选项deep和immediate
deep:为了发现对象内部值的变化，可以在选项参数中指定deep:true
vm.$watch('someObject', callback, { deep: true});
vm.someObject.nestedValue = 123;
immediate：在选项参数中指定immediate:true,将立即以表达式的当前值触发回调。
vm.$watch('a',callback, {immediate: true})//立即以'a'的当前值触发回调