概述
在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。
demo演示代码片段
html代码
demo a：{
{a}}b: {
{b}}a+b: {
{total}}
js代码
var demo = new Vue({ el: '#demo', data: { a: 1, b: 2, }, computed:{ total() { return this.a + this.b; } }, methods: { addA() { this.a += 1; } }}) 简单说明
这是一段简单的代码。页面中引用了data中的a,b属性，计算属性total则是求a与b的和。页面中提供一个button按钮，每点击一次会对属性a+1。total属性则会根据依赖变化，判断total值是否需要更新，并在合适的时机更新。
代码初始化部分
new一个Vue的时候做了什么
当我们new一个vue时，实际上执行了vue的构造函数，这个构造函数内部挂载了很多方法，可以在我的上一篇文章中看到。构造函数内部调用了_init方法，那我们看看init里做了什么即可。
function Vue (options) { this._init(options)} init函数
Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ // 通过_isVue标识该对象不需要被做响应式处理。 vm._isVue = true // 合并构造函数上挂载的options与当前传入的options. if (options && options._isComponent) { initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } // 非生产环境，包装实例本身，在后期渲染时候，做一些校验提示输出。 if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // 初始化生命周期相关 initLifecycle(vm) // 初始化事件相关 initEvents(vm) // 初始化渲染相关 initRender(vm) // 这里调用beforeCreate钩子 callHook(vm, 'beforeCreate') // inject/provide相关处理 initInjections(vm) // resolve injections before data/props // 初始化data、props以及computed,watch等。 initState(vm) initProvide(vm) // resolve provide after data/props // 调用created钩子 callHook(vm, 'created') if (vm.$options.el) { // 挂载组件到页面上的 vm.$mount(vm.$options.el) }} 这篇文章讲述的内容,需要我们着重关注一下initState函数与vm.$mount中渲染部分的内容。
initState函数
export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options //初始化props if (opts.props) initProps(vm, opts.props) // 初始化methods if (opts.methods) initMethods(vm, opts.methods) // 初始化data if (opts.data) { initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } // 初始化计算属性 if (opts.computed) initComputed(vm, opts.computed) // 初始化watch if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) }} 接下里的几篇我们将围绕着initData，initComputed，initWatch函数，分别展开，探究其内部做了什么。