Vuejs源码学习笔记一

Vue

Vue.js作为目前主流热门的前端框架，本人从2016年接触，做了几个小小的demo和实验项目，现在准备深入其中的设计思想，彻底摸清MVVM框架的真谛，为何Vue.js能成为大火的框架，其优秀之处到底何在。

MVVM

在做.net的WPF时第一次接触到了MVVM思想，在之前接触最多的无非是MVC,MVP。
一下就被WPF的数据绑定，属性通知，命令映射等机制震撼，微软通过数据绑定+属性更改通知，实现了view到viewmodel的双向绑定。相比于MVC和MVP的单向数据流动，MVVM实现了视图和视图模型的双向联动。

在Web前端领域，之前主流的是Dom helper lib(jQuery,Zepto,Kissy etc.)+Template的开发模式，其实并不算是MVC或MVP模式，因为从Model到View基本上要靠硬编码实现，Controller只是一些零碎的绑定方法，将数据初始化到html元素中，View到Model的反馈依赖对元素事件的处理，同样需要硬编码。

而在Vue中，MVVM模式解放了代码编写者。不需要重复性编写大量赋值和事件回调语句，因为双向绑定将View和Viewmodel的改变连接在一起，通过观察者模式触发彼此的改变，同时将View的事件与Viewmodel的方法绑定，使得事件处理更加直观。

组件化

Vue的另一大亮点就是组件化，组件可以将复杂的需求拆解为简单的部分，同时提供极大的复用性。甚至能在不同的项目之间复用。同时使用Template标签可以将复杂的功能纳入组件之中，实现强大的功能。

index.js

说了那么多，开始看代码。

    import { initMixin } from './init'
    import { stateMixin } from './state'
    import { renderMixin } from './render'
    import { eventsMixin } from './events'
    import { lifecycleMixin } from './lifecycle'
    import { warn } from '../util/index'

    function Vue (options) {
    if (process.env.NODE_ENV !== 'production' &&
        !(this instanceof Vue)
    ) {
        warn('Vue is a constructor and should be called with the `new` keyword')
    }
    this._init(options)
    }

    initMixin(Vue)
    stateMixin(Vue)
    eventsMixin(Vue)
    lifecycleMixin(Vue)
    renderMixin(Vue)

    export default Vue

这是src/core/instance/index.js的内容，可以看到我们熟悉的Vue构造函数就是在这里定义的，构造函数接收options参数，通过下面的几个方法添加了Vue的原型方法，其中_init方法就是在initMixin方法中添加的。