Vue作为一种MVVM框架，最被人津津乐道的就是数据和视图的绑定，它将DOM节点的直接操作变成了修改数据数据，利用Virtual Dom来区分和比较新老视图，从而实现更新。不仅如此，还可以通过Vue.prototype.$watch监控数据的变化，执行回调函数，实现自定义逻辑。虽然我们熟悉日常的编码应用，但是我们从来没有研究过技术背后的实现原理。作为一个好学的程序员，有必要知道为什么。本文将从源代码的角度分析Vue响应数据中的观察者模式。

初始化Vue实例

阅读源代码时，由于文件多，引用复杂，我们很难把握重点。在这里，我们需要找到一个入口文件，从Vue构造函数开始，抛开其他不相关的因素，一步一步了解响应式数据的实现原理。首先，我们找到Vue构造函数：

//src/core/instance/index . jsfunction Vue(选项){ if (process.env.NODE_ENV！=='生产'！(Vue的这个实例){ warn('Vue是一个构造函数，应该用' new '关键字来调用)} this。_init(选项)}//src/core/instance/init . jsvue . prototype . _ init=function(选项){ 0.//避免被观察到的vm的标志。_isVue=true //合并选项//Initialize $ options if(选项选项。_ is component){ initial component(VM，options) } else { vm。$ options=mergeOptions(resolvecostructoroptions(VM . constructor)，options || {}，init生命周期(VM)//对实例的父、根、子、refs进行排序，初始化一些与生命周期相关的实例属性。//初始化侦听器initRender(vm) //初始化实例的槽。vm实例callHook(vm绑定到createElement函数(vm，‘before create’)initinjetions(VM)//解析数据/道具之前的注入initState(vm) initProvide(vm) //解析数据/道具之后的提供调用Hook(vm，‘created’)if(VM)。$ options.el) {VM。$ mount(虚拟机。$ options . El)//将组件挂载到节点}}为了方便阅读，我们去掉了流类型检查和一些不相关的代码。可以看出Vue。原型。在实例化vue组件时会调用_ init，而在方法中，数据的初始化操作主要是在initState中进行的(这里initInjections和initProvide类似于initProps，理解了initState的原理后自然就明白了)，所以我们重点关注initState。

//src/core/instance/state . jsexport函数initState (vm) { vm。_watchers=[] const opts=vm。$ options if(opts . props)init props(VM，opts . props)if(opts . methods)init methods(VM，opts . methods)if(opts . data){ init data(VM)} else { observe(VM。_data={}，true/* asRootData */)} if(opts.computed)init computed(VM，opts.computed)if(opts . watch opts . watch！==nativewitch) {initwatch (VM，opts。watch)}}首先初始化a _watchers数组来存储watchers，然后是root