Vuejs源码的背后.docxVIP

下面的代码会在页面上输出Hello World，但是在这个?new Vue()?到页面渲染之间，到底发生了什么。这篇文章希望通过最简单的例子，去了解Vue源码过程。这里分析的源码版本是?Vue.version = 1.0.20div id=mountNode{{message}}/divvar vm = new Vue({ el: #mountNode, data: function () { return { message: Hello World }; }});这篇文章将要解决几个问题：new Vue()的过程中，内部到底有哪些步骤如何收集依赖如何计算表达式如何表达式的值如何反应在DOM上的简单来说过程是这样的：observe: 把{message: Hello World}变成是reactive的compile: compileTextNode {{message}}，解析出指令(directive = v-text)和表达式(expression = message)，创建fragment(new TextNode)准备替换link：实例化directive，将创建的fragment和directive链接起来，将fragment替换在DOM上bind: 通过directive对应的watcher获取依赖(message)的值(Hello World)，v-text去update值到fragment上详细过程，接着往下看。构造函数文件路径：src/instance/vue.jsfunction Vue (options) { this._init(options)}初始化这里只拿对例子理解最关键的步骤分析。文件路径：src/instance/internal/init.jsVtotype._init = function (options) { ... // merge options. options = this.$options = mergeOptions( this.constructor.options, options, this ) ... // initialize data observation and scope inheritance. this._initState() ... // if `el` option is passed, start compilation. if (options.el) { this.$mount(options.el) }}merge optionsmergeOptions()?定义在src/util/options.js文件中，这里主要定义options中各种属性的合并（merge），例如：props, methods, computed, watch等。另外，这里还定义了每种属性merge的默认算法（strategy），这些strategy都可以配置的，参考?Custom Option Merge Strategy在本文的例子中，主要是data选项的merge，在merge之后，放到?$options.data?中，基本相当于下面这样：vm.$options.data = function mergedInstanceDataFn () { var parentVal = undefined // 这里就是在我们定义的options中的data var childVal = function () { return { message: Hello World } } // data function绑定vm实例后执行，执行结果: {message: Hello World} var instanceData = childVal.call(vm) // 对象之间的merge，类似$.extend，结果肯定就是：{message: Hello World} return mergeData(instanceData, parentVal)}init data_initData()?发生在?_initState()?中，主要做了两件事：代理data中的属性observe data文件路径：src/instance/internal/state.jsVtotype._initState = function () { this._initProps() this._initMeta() this._initMethods() this._initData() // 这里 this._initComputed() }属性代理（proxy）把data的结果赋值给内部属性：文件路径：src/instance/internal/state.jsvar da