概述
在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。
demo演示代码片段
html代码
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="demo">
<div>
<p>a：{{a}}</p>
<p>b: {{b}}</p>
<p>a+b: {{total}}</p>
<button @click="addA">a+1</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>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中渲染部分的内容。