Vue源码阅读笔记，持续更新

Posted 2020-10-31 ztfjs

/ / Vue.js v2.1.3 源码阅读记录 使用的文件为使用es2015的本地文件

2018年4月20日 14:06:30 */

第一章，Vuejs的整体架构

1. 入口

• 入口处使用一个闭包(function (global,factory) {factory()})(this,factory)； 其中factory是工厂的意思，它的内部实现是一个工厂函数，其中直接声明的function为私有成员。

  2. 生命周期的理解

• 理解vue的生命周期对通读vue源码的效率有较好的帮助，它的生命周期分为几步，也可以在官网查阅到.

  1. new Vue() 第一步，new一个Vue对象，这里在new Vue时触发beforeCreate事件
  2. Observe Data 这里，我的理解是创建一个观察者，观察new Vue时传入的data对象 3.

  3. 工厂函数

  知识点

  # Object.create
  * 这个方法可以返回一个新的对象，可以为这个对象指定一个__proto__原型对象
  - 这个方法可以接受两个参数：
  * 第一个参数为原型链对象，最后生成的对象的__proto__就是它
  * 第二个参数可以指定对象的原始对象，加到新创建对象的可枚举属性
   （即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。
  *常见使用场景是，继承，例如代码
      `
          function Person(){
  
          }
          Person.prototype = {
            setName :function(name){
              this.name = name;
            }
          }
  
          function People(){
  
          }
          People.prototype = Object.create(Person.prototype);
          People.prototype.getName = function(){
            this.setName(‘zhangtaifeng‘);
            alert(this.name);
          }
          new People().getName();
      `
    这里需要注意的是this的指向。
    `
    setName :function(name){
      this.name = name;  //这里的this指向调用setName的对象。
    }
    `
  # Object.freeze
    - 这个方法可以冻结一个对象，冻结一个对象指的是，这个对象不可改变属性，删除属性，新增属性，不能修改可枚举型，可配置，可写

  源码解析

  • 大概在422行 var config = {}

    • 这里应该是vue的初始配置处。

  • 大概在663行 var Observer = function(Observer){}

    • 这是vue中的观察者类，使用了观察者模式

  • 大概在1418行发现一个{}包装起来的代码块，暂时未发现用处。 经过实验，在{}中声明变量作用域依旧在父级块中。

  • 1860行 initData方法，传入了一个vm对象，通过对data的判断，对data的转换，调用observe方法观察data的变化，给data打上get set方法

  • 1899行 initComputed 初始化计算属性

    3197行 Vue.prototype._init方法

    *

第二章，依据官网的教程示例，逐步理解分析

1. hello World实现解析 `

   {{message}}
   `

    

   • ① 在 32767 行定义了一个Vue$3的构造函数，紧随着在它后面调用了initMixin stateMixin等混合方法，将各种系统混入或继承至构造函数中

     ② 合并策略对象mergeOptions

思维记录

• 第1368行 var util = Object.freeze 这里记录了上面所有的工具函数