源码笔记一

2021-09-08

Word count: 511 | Reading time≈ 2 min

Vue的引入
Vue的使用按照官方的说法支持CDN和NPM两种方式，CDN的方式是以script的方式将打包好的vue.js引入页面脚本中，而NPM的方式是和诸如 webpack 或 Browserify 模块打包器配置使用，以npm install vue的方式引入，这也是我们开发应用的主要形式。而从单纯分析源码思路和实现细节的角度来讲，打包后的vue.js在分析和提炼源码方面会更加方便，所以这个系列的源码分析，使用的是打包后的vue脚本

Vue的构造器，vue尊从umd规范是commonjs和amd的整个，vue本身是一个构造器，保证它只能通过new实例的形式去调用，而不能通过函数形式去调用。

   (function (global, factory) {
      // 遵循UMD规范
      typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' && define.amd ? define(factory) :
      (global = global || self, global.Vue = factory());
    }(this, function () { 'use strict';
      ···
      // Vue 构造函数
      function Vue (options) {
        // 保证了无法直接通过Vue()去调用，只能通过new的方式去创建实例
        if (!(this instanceof Vue)
        ) {
          warn('Vue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
      }
      return Vue
    })
   ````

3. 定义原型属性方法
  ``` javascript

  initMixin(Vue);// 定义Vue原型上的init方法(内部方法)

  stateMixin(Vue); // 定义原型上跟数据相关的属性方法

  eventsMixin(Vue);//定义原型上跟事件相关的属性方法

  lifecycleMixin(Vue);// 定义原型上跟生命周期相关的方法

  renderMixin(Vue);  // 定义渲染相关的函数

initMixin定义了内部在实例化Vue时会执行的初始化代码，它是一个内部使用的方法。

1
2
3

function initMixin (Vue) {
  Vue.prototype._init = function (options) {}
}

stateMixin方法会定义跟数据相关的属性方法，例如代理数据的访问，我们可以在实例上通过this.$data和this.$props访问到data,props的值，并且也定义了使用频率较高的this.$set,this.$delte等方法。