写文章不容易,点个赞呗兄弟 专一 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工做原理,源码版助于了解内部详情,让咱们一块儿学习吧 研究基于 Vue版本 【2.5.17】javascript
若是你以为排版难看,请点击 下面连接 或者 拉到 下面关注公众号也能够吧java
今天咱们用白话文解读 watch 的工做原理,轻松快速理解 watch 内部工做原理。你说,你只懂怎么用的,却不懂他内部是怎么工做的,这样能有什么用?框架
近期有篇 《中止学习框架》很火,其实本意不是让咱们不要学框架,而是让咱们不要只停留在框架表面,咱们要学会深刻,以一敌十,让咱们也要学会框架的抽象能力函数
watch 想必你们用得应该也挺多的,用得也很顺,若是你顺便花一点点时间了解一下内部的工做原理,相信确定会对你的工做有事半功倍的效果学习
watch 的工做原理其实挺简单的,若是你有看过我以前讲解其余选项的文章,你能够一会儿就明白 watch 是如何工做的,因此这边文章我也✍得很快code
根据 watch 的 api,咱们须要了解三个地方对象
一、监听的数据改变的时,watch 如何工做blog
二、设置 immediate 时,watch 如何工做递归
三、设置了 deep 时,watch 如何工做
<br> <br>
Vue 会把数据设置响应式,既是设置他的 get 和 set
当 数据被读取,get 被触发,而后收集到读取他的东西,保存到依赖收集器
当 数据被改变,set 被触发,而后通知曾经读取他的东西进行更新
若是你不了解,能够查看下 之前的文章
<br> <br>
watch 在一开始初始化的时候,会 读取 一遍 监听的数据的值,因而,此时 那个数据就收集到 watch 的 watcher 了
而后 你给 watch 设置的 handler ,watch 会放入 watcher 的更新函数中
当 数据改变时,通知 watch 的 watcher 进行更新,因而 你设置的 handler 就被调用了
<br> <br>
当你设置了 immediate 时,就不须要在 数据改变的时候 才会触发。
而是在 初始化 watch 时,在读取了 监听的数据的值 以后,便当即调用一遍你设置的监听回调,而后传入刚读取的值
<br> <br>
咱们都知道 watch 有一个 deep 选项,是用来深度监听的。什么是深度监听呢?就是当你监听的属性的值是一个对象的时候,若是你没有设置深度监听,当对象内部变化时,你监听的回调是不会被触发的
在说明这个以前,请你们先了解一下
当你使用 Object.defineProperty 给 【值是对象的属性】 设置 set 和 get 的时候
1若是你直接改变或读取这个属性 ( 直接赋值 ),能够触发这个属性的设置的 set 和 get
2可是你改变或读取它内部的属性,get 和 set 不会被触发的
var inner = { first:1111 } var test={ name:inner } Object.defineProperty(test,"name",{ get(){ console.log("name get被触发") return inner }, set(){ console.log("name set被触发") } }) // 访问 test.name 第一次,触发 name 的 get Object.defineProperty(test.name,"first",{ get(){ return console.log("first get被触发") }, set(){ console.log("first set被触发") } }) // 访问 test.name 第二次,触发 name 的 get var a = test.name // 独立访问 first 第一次 var b= a.first // 独立访问 first 第二次 b= a.first // 独立改变 first a.first = 5
能看到除了有两次须要访问到 name,必不可少会触发到 name 的 get
以后,当咱们独立访问 name 内部的 first 的时,只会触发 first 的 get 函数,而 name 设置的 get 并不会被触发
看上面的例子后,因此当你的 data 属性值是对象,好比下面的 info
data(){ return { info:{ name:1 } } }
此时,Vue在设置响应式数据的时候, 遇到值是对象的,会递归遍历,把对象内全部的属性都设置为响应式,就是每一个属性都设置 get 和 set,因而每一个属性都有本身的一个依赖收集器
首先,再次说明,watch初始化的时候,会先读取一遍监听数据的值
一、由于读取了监听的 data 的属性,watch 的 watcher 被收集在 这个属性的 收集器中
一、由于读取了监听的data 的属性,watch 的 watcher 被收集在 这个属性的 收集器中
二、在读取 data 属性的时候,发现设置了 deep 并且值是一个对象,会递归遍历这个值,把内部全部属性逐个读取一遍,因而 属性和 它的对象值内每个属性 都会收集到 watch 的 watcher
因而,不管对象嵌套多深的属性,只要改变了,会通知 相应的 watch 的 watcher 去更新,因而 你设置的 watch 回调就被触发了
证实 watch 的 watcher 深度监听时是否被内部每一个属性都收集
我在 Vue 内部给 watch 的 watcher 加了一个 属性,标识他是 watch 的 watcher,而且去掉了多余的属性,为了截图短一点
因而咱们能看到,parentName 以及 parentName 内部的属性 a 都收集了 watch 的 watcher,以此类推,就算嵌套再深,设置深度监听就能够触发监听回调了,坐实了坐实了