Vue 2.0 使用的 options API,本质是一个类在例时传入一个 options 对象,这个 options 对象有很多的属性。

  1. let vm = new Vue({
  2. el: '#app',
  3. data() {
  4. return {
  5. a: 1,
  6. }
  7. },
  8. computed: {
  9. // ...
  10. },
  11. methods: {
  12. // ...
  13. },
  14. // ...
  15. });

Vue 构造函数 / 类

由此可知,Vue 就是一个构造函数(ES5)或是一个类(ES6)
然后为 Vue.prototype 添加上方法与函数

  • 定义 init 方法,用于 Vue 的所有初始化
    • 把实例 this 定义为 vm 变量, 以防止混乱
    • 将 options 挂载到实例 vm 上
    • 调用初始化的方法
      • initState
        • eg. data / computed 等等
      • initMinx

vue/index.js

  1. import { initState, initMixin } from './init';
  2. function Vue (options) {
  3. this._init(options);
  4. }
  5. // 定义 init 方法,用于 Vue 的所有初始化
  6. Vue.prototype._init = function (options) {
  7. var vm = this; // 把实例 this 定义为 vm 变量, 以防止混乱
  8. vm.$options = options; // 将 options 挂载到实例 vm 上
  9. initState(vm); // 调用初始化状态的方法
  10. initMixin(vm); // 其实的初始化方法 ...
  11. }
  12. export default Vue;

定义所有初始化

用于存入所有初始化的方法
init.js

  1. function initState (vm) {
  2. }
  3. function initMixin (vm) {
  4. }
  5. // ... 其它的需要初始化的方法
  6. export {
  7. initState,
  8. initMixin,
  9. // ...
  10. }