本篇文章给大家带来的内容是关于vue观察模式的简单理解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
以下是我对vue观察者模式的理解:
不要对框架的偏见, 你真的了解jquery、angular、react 等等，框架是什么只是工具而已。
 你用过jquery的 trigger、on、off 事件绑定的方法吗？事实上 vue 不过也是这种模式，只不过vue 是自动调用on方法，自动触发trigger。甚至可以不用jquery对事件监听触发的实现。其实最终解释就是对某种事件的callback（基础原理）。
以下是源码目录截图：
1... vue 实例初始化时，会对data函数返回的对象里的属性调用以下方法，代码注释如下:
 // 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性，重写对应属性的 赋值 和获取的操作。具体查看 （mdn  object.defineproperty api）  object.defineproperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactivegetter () {      const value = getter ? getter.call(obj) : val      // watcher 对象， 如果存在      if (dep.target) {        // 把watcher 实例 推入 dep 实例的 subs 数组里， 这个就相当于 on        dep.depend()        if (childob) {          childob.dep.depend()          if (array.isarray(value)) {            dependarray(value)          }        }      }      return value    },    set: function reactivesetter (newval) {      const value = getter ? getter.call(obj) : val      /* eslint-disable no-self-compare */      if (newval === value || (newval !== newval && value !== value)) {        return      }      /* eslint-enable no-self-compare */      if (process.env.node_env !== 'production' && customsetter) {        customsetter()      }      if (setter) {        setter.call(obj, newval)      } else {        val = newval      }      childob = !shallow && observe(newval)      // 通知 dep 实例 中subs 里数组 中所有 watcher 实例, 然后调用watcher实例里的 update方法(), 这个就相当于 trigger。      dep.notify()    }  })
// watcher 构造函数  constructor (    vm: component,    exporfn: string | function,    cb: function,    options?: ?object,    isrenderwatcher?: boolean  )
2...watcher初始化时，会调用dep.pushtarget方法, 把 wathcer实例赋值到dep.js 里的dep.target, 接着会根据 exporfn，运行exporfn 所代表的方法。这个方法里基本上包含调用 1...里的getter方法(想想render钩子里的操作基本有获取vue实例属性data里的值或者获取vue实例的计算属性的值)。
var vm = new vue({    data () {        return {msg: '找个小姐姐！'}    },    // 相当于 exporfn    render(h) {        return h('h3', {},          // 这里面就会调用 msg 对应的 getter方法          this.msg        )    }})
所以就会使 render  函数 与 vue 实例 的 数据 data属性 和观察属性等产生联系，这就形成一个闭环。当其中的属性变化，就会自动调用 setter 方法，从而触发dep.notify 方法，进而又会触发 dep.subs 里的 watcher 实例调用 update方法，进而更新。
（这部分代码不知如何说，故此没写, 具体查看源码）
以上就是vue观察模式的简单理解的详细内容。