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

Posted ztfjs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue源码阅读笔记,持续更新相关的知识,希望对你有一定的参考价值。

/ / 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 这里记录了上面所有的工具函数

以上是关于Vue源码阅读笔记,持续更新的主要内容,如果未能解决你的问题,请参考以下文章

回归 | js实用代码片段的封装与总结(持续更新中...)

小程序各种功能代码片段整理---持续更新

Vue最全知识点(基础到进阶,覆盖vue3.0,持续更新整理,欢迎补充讨论)

如何阅读Vuejs源码,学习笔记

Vue3-API学习笔记(持续更新中...)

vue源码解读Observer/Dep/Watcher是如何实现数据绑定的