Vue源码------------- 数据响应系统的基本思路

在 Vue 中，我们可以使用 $watch 观测一个字段，当字段的值发生变化的时候执行指定的观察者，如下：

        var vm = new Vue({
          data: {
            num:1
          }
        })
        vm.$watch('num',function() {
          console.log('num被修改')
        })

这时候，当我们去修改  num 数值的时候，就会打印出来  'num被修改'。这个到底是如何实现，怎么打印出来的呢？

现在我们先以另一种方式，讲解期中的道理。关键一个知识点： Object.definePropert； 不了解的先打开这先看下

  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

假设我们 有下边的数据

    var  data = {
       num: 1
    }

 我们还有一个叫做 $watch 的函数，同时函数接受两个参数；第一个参数是要观测的字段，第二个参数是当该字段的值发生变化后要执行的函数，如下：

        function $watch () {...}
        $watch('num', () => {
          console.log('修改了 num')
        })

 下边通过 Object.defineProperty 实现下边的功能：

        Object.defineProperty(data, 'num', {
          set () {
            console.log('设置了num')
          },
          get () {
            console.log('读取了 num')
          }
        })

通过 Object.defineProperty  我们可以轻松知道  num 被设置，和读取了。但问题是如何让$watch 方法知道，同时通知第二个参数函数呢？

    有了上边的想法，我们就可以大胆地思考一些事情，比如： 能不能在获取属性 num 的时候收集依赖，然后在设置属性 num的时候触发之前收集的依赖呢？

        // dep 数组就是我们所谓的“筐”
        const dep = []
        Object.defineProperty(data, 'num', {
          set () {
            // 当属性被设置的时候，将“筐”里的依赖都执行一次
            dep.forEach(fn => fn())
          },
          get () {
            // 当属性被获取的时候，把依赖放到“筐”里
            dep.push(fn)
          }
        })

上边的 fn 来自哪里？ 又是在什么时候出发num 属性的get() 呢？

接下来需要在$watch()上下手：

     // fn 是全局变量
     let fn= null
     function $watch (exp, callback) {
       // 将 fn 的值设置为 callback
       fn = callback
       // 读取字段值 exp，触发 get 函数
       data[exp]
     }

通过上边调用$watch 方法，先给全局变量fn 设置为回调函数，然后读取data的属性，num属性的get方法中，收集callback, 这样当num 变化时候可以通知callback方法;

   上边的方法还有几个问题需要思考：

   1.  实现多个属性监听；2. data 某个属性字段是对象时，3. 确定属性值发生变化，才去出发回调；

    要解决上述问题又要怎么去做呢？ 下边封装一个方法：

        function observe(data) {
          for (let key in data) {
            const dep = []
            let val = data[key]
            // 如果 val 是对象，递归调用 observe 函数将其转为访问器属性
            const nativeString = Object.prototype.toString.call(val)
            if (nativeString === '[object Object]') {
              observe(val)
            }
            Object.defineProperty(data, key, {
              set:function setter (newVal) {
                if (newVal === val) return
                val = newVal
                dep.forEach(fn => fn())
              },
              get:function getter () {
                dep.push(fn)
                return val
              }
            })
          }
        }
        observe(data)

Vue中$watch方法第一个参数可以是 data 中的某个属性，function, 以及data属性中 对象的属性 ； 那么这个watch是如何实现呢？ 下边我们改变下$watch（）；

        function $watch (exp, callback) {
          fn= fcallback
          let pathArr,
            obj = data
          if (typeof exp === 'function') {
            exp()
            return
          }
          // 检查 exp 中是否包含 .
          if (/\./.test(exp)) {
            // 将字符串转为数组，例：'a.b' => ['a', 'b']
            pathArr = exp.split('.')
            // 使用循环读取到 data.a.b
            pathArr.forEach(p => {
              obj = obj[p]
          })
            return
          }
          data[exp]
        }

先判断第一个参数 时候为function ，如果为function,则直接调用第一个参数；如果为obj.a 等形式；则进行split分割一层层出发，收集fn;

最后完整版下如下：

        var fn = null;
        var data = {names:"xiaoming", age:19,obj: {a:1,b:2,c:{c:1,d:2}}}
        function observe (data) {
          for (let key in data) {
            const dep = []
            let val = data[key]
            // 如果 val 是对象，递归调用 observe 函数将其转为访问器属性
            const nativeString = Object.prototype.toString.call(val)
            if (nativeString === '[object Object]') {
              observe(val)
            }
            Object.defineProperty(data, key, {
              set: setter(newVal) {
                if (newVal === val) return
                val = newVal
                dep.forEach(fn => fn())
              },
              get: getter() {
                dep.push(fn)
                return val
              }
            })
          }
        }

        observe(data)

        function $watch (exp, callback) {
          fn = callback
          let pathArr,
            obj = data
          if (typeof exp === 'function') {
            exp()
            return
          }
          // 检查 exp 中是否包含 .
          if (/\./.test(exp)) {
            // 将字符串转为数组，例：'a.b' => ['a', 'b']
            pathArr = exp.split('.')
            // 使用循环读取到 data.a.b
            pathArr.forEach(p => {
              obj = obj[p]
          })
            return
          }
          data[exp]
        }

        $watch('names',function() {
          console.log('name change')
        })

运行：在改变 data.names = '小明'; 
    结果：

当然Vue实现肯定不会如此简单，接下来有空慢慢细讲，(*^▽^*)