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实现肯定不会如此简单，接下来有空慢慢细讲，(*^▽^*)