自己用vue也不久了，学习之初就看过vue实现的原理，当时看也是迷迷糊糊，能说出来最基本的，但是感觉还是理解的不深入，最近找到了之前收藏的文章，跟着大神一步步敲了一下简易的实现，算是又加深了理解。

  
       
       
         
     
          {
    {name}}    
      
      {
    {name}}    
    
        
     
  

　　以上的备注是我看了文章后自己的一些理解，这个得简单实现跟vue的源码好像是有区别，比如

function defineReactive(obj, key, val) {    var dep = new Dep()    var childOb = Observer.create(val)    Object.defineProperty(obj, key, {        enumerable: true,        configurable: true,        get: function metaGetter() {            // 如果Dep.target存在，则进行依赖收集            if (Dep.target) {                dep.depend()                if (childOb) {                    childOb.dep.depend()                }            }            return val        },        set: function metaSetter(newVal) {            if (newVal === val) return            val = newVal            childOb = Observer.create(newVal)            dep.notify()        }    })}Watcher.prototype.addDep = function (dep) {    var id = dep.id    if (!this.newDeps[id]) {        this.newDeps[id] = dep        if (!this.deps[id]) {            this.deps[id] = dep            dep.addSub(this)        }    }}作者：百度外卖大前端技术团队链接：https://juejin.im/post/5a44b15e51882538fe631406来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

　源码中在dep的get里面并没有直接调用addsub，而是调用

dep.depend(); 而dep.depend() 实际执行了 Watcher.addDep() 这样最终是在Watcher对象的方法里面实现了增加订阅者，感觉好像是订阅者主动要求dep添加自己，而简易框架是，dep主动添加，感觉都差不多吧。，可能原文作者为了方便，而vue可能处于更全面的考虑吧

另外我也懂了vue原理中watcher,dep,observer，compile等这几个对象的概念和他们之间的关系，observer是数据观察者，主要是劫持data数据，添加set，get,并观察数据的变动，若触发了set,就调用dep的notify方法，若触发了get,就会新增watcher到dep的存放观察者的数组中。

另外这个图片也可以说明一切，终于看懂了，以前知道这么连接，只是不知道为什么这么连接的，另外还有一篇文章是讲解关于这幅图的理解的那个是对源码进行解读的，比较详细

，另外还有一篇文章也是大牛自己实现vue的简易框架的，与这个得实现思路略微有所不同：