共计 2112 个字符，预计需要花费 6 分钟才能阅读完成。
概述
在使用 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 中渲染部分的内容。
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 函数，分别展开，探究其内部做了什么。
相关章节
vue 源码分析系列之响应式数据（二）