【Vue原理】Watch - 白话版

写文章不容易，点个赞呗兄弟 专一 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工做原理，源码版助于了解内部详情，让咱们一块儿学习吧 研究基于 Vue版本 【2.5.17】

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】Watch - 白话版

今天咱们用白话文解读 watch 的工做原理，轻松快速理解 watch 内部工做原理。你说，你只懂怎么用的，却不懂他内部是怎么工做的，这样能有什么用？

近期有篇 《中止学习框架》很火，其实本意不是让咱们不要学框架，而是让咱们不要只停留在框架表面，咱们要学会深刻，以一敌十，让咱们也要学会框架的抽象能力

watch 想必你们用得应该也挺多的，用得也很顺，若是你顺便花一点点时间了解一下内部的工做原理，相信确定会对你的工做有事半功倍的效果

watch 的工做原理其实挺简单的，若是你有看过我以前讲解其余选项的文章，你能够一会儿就明白 watch 是如何工做的，因此这边文章我也✍得很快

根据 watch 的 api，咱们须要了解三个地方

一、监听的数据改变的时，watch 如何工做

二、设置 immediate 时，watch 如何工做

三、设置了 deep 时，watch 如何工做

<br> <br>

简述 响应式

Vue 会把数据设置响应式，既是设置他的 get 和 set

当 数据被读取，get 被触发，而后收集到读取他的东西，保存到依赖收集器

当 数据被改变，set 被触发，而后通知曾经读取他的东西进行更新

若是你不了解，能够查看下 之前的文章

【Vue原理】响应式原理 - 白话版

<br> <br>

监听的数据改变的时，watch 如何工做

watch 在一开始初始化的时候，会 读取 一遍 监听的数据的值，因而，此时 那个数据就收集到 watch 的 watcher 了

而后 你给 watch 设置的 handler ，watch 会放入 watcher 的更新函数中

当 数据改变时，通知 watch 的 watcher 进行更新，因而 你设置的 handler 就被调用了

<br> <br>

设置 immediate 时，watch 如何工做

当你设置了 immediate 时，就不须要在 数据改变的时候 才会触发。

而是在 初始化 watch 时，在读取了 监听的数据的值 以后，便当即调用一遍你设置的监听回调，而后传入刚读取的值

<br> <br>

设置了 deep 时， watch 如何工做

咱们都知道 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初始化的时候，会先读取一遍监听数据的值

没有设置 deep

一、由于读取了监听的 data 的属性，watch 的 watcher 被收集在 这个属性的 收集器中

设置了 deep

一、由于读取了监听的data 的属性，watch 的 watcher 被收集在 这个属性的 收集器中

二、在读取 data 属性的时候，发现设置了 deep 并且值是一个对象，会递归遍历这个值，把内部全部属性逐个读取一遍，因而 属性和 它的对象值内每个属性 都会收集到 watch 的 watcher

因而，不管对象嵌套多深的属性，只要改变了，会通知 相应的 watch 的 watcher 去更新，因而 你设置的 watch 回调就被触发了

实际证实

证实 watch 的 watcher 深度监听时是否被内部每一个属性都收集

我在 Vue 内部给 watch 的 watcher 加了一个 属性，标识他是 watch 的 watcher，而且去掉了多余的属性，为了截图短一点

因而咱们能看到，parentName 以及 parentName 内部的属性 a 都收集了 watch 的 watcher，以此类推，就算嵌套再深，设置深度监听就能够触发监听回调了，坐实了坐实了