• vue源码阅读(二)


    一 一个实例

        如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程。

        那么下边这个则是实例化构造函数,也就是开始使用了,不管是作为框架,还是作为插件,都需要new一下。

        

        千呼万唤,我们把它请出来之后,发现点不同的东西,router、filter、store暂时先不表,但是这个#app是个啥东西?

        翻篇回去,先看Vue的构造函数,this._init(options)是调用的第一个方法,包括传进来的参数options,不过在这之前,还判断了下调用Vue的是不是先new出来的。

        

       

    二 从init方法到Vue初始化做的第一件事

        根据注入的文件 找到了 init方法的文件,它是在core/instance/init.js

        完整的方法如下

        

        一开始是定义了两个属性 _uid 和_isVue 

        其中_uid是当前实例的唯一id,而且是递增的实例id 保证不会重复,一般会自动分配,不建议操作,当然如果需要操作的话,可以手动分配

        _isVue设置为true,避免监听对象时自身被监听

        然后是判断是否定义_isComponent(),这里查了下注释和代码,is_Component = true是指内部的组件实例,而initInternalCompoent()函数是作者对组件内部实例化的优化,

        一般我们写的代码都会走else的分支,也就是mergeOptions() 这个方法。

       

        接下来就遇到了第一个比较重要的点,理解mergeOptions这个方法,他定义在工具类的options这个js文件夹下。

        首先想到的是为什么要进行策略对象的合并,而且是init的第一步,简单的说,Vue在处理选项的时候,使用了这个策略对象把父子选项进行合并,并将最终的值赋值给实例下

        的$options,更直白的说就是把vue实例上原有的属性和传入的option以及继承和构造的所有属性进行递归式的合并,确保一个vue实例是有一个$options.

        先说下这个options,当我们new一个vue的实例时,可以传一些数据,比如上面new的函数那样,从前边看,vue的实例在实例化后会加载很多其他的东西,例如生命周期钩子、render函数等等。

        而手动传入的这个对象,就叫做options,也是上面vm.$options中传入的第二个参数,关于vm.$options,是一个贯穿整个源码的属性,可以单独拆出来讲,但是为了文章的完整性,先简单说一下,不然后边的这个合并策略对象就会云里雾里。

       这是mergeOptions()执行的流程

       

       

        这函数涉及到了很多复杂的合并策略,包括钩子函数、props、methods、injectcomputed、directives、filter、data,为了轻松的走完整个流程,这里不展开

        更具体的流程如下:

        

    三 一个嵌套的三元表达式

        看这些复杂的合并代码有点脑壳疼,作者还特别秀的写了个嵌套的三元表达式,他长这样。

        

        

    四 

        总结一下Vue的初始化:Vue的初始化主要就干了这么几件事:合并配置、初始化生命周期、初始化事件和渲染逻辑、初始化data做数据劫持,这种把不同的功能和逻辑部分

    拆分成一个个单独的模块,使得Vue的核心加载过程一目了然,这种编程思想是十分值得借鉴的。

        

    吾生有涯 而知也无涯矣
  • 相关阅读:
    实验3 简单的分支与循环结构 2.利用循环计算n个圆柱体体积。
    实验 3 简单的分支与循环结构 第一题 编写求圆面积的程序,要求当输入的半径r<=0时,提示输入错误,要求r为浮点型,r的数值是动态的由键盘输入
    心得3
    作业 3 应用分支与循环结构解决问题
    实验5 函数
    实验1 题目2
    第三,四章学习心得
    第2章学习心得
    第一章学习心得
    5-3
  • 原文地址:https://www.cnblogs.com/Sherlock09/p/9436655.html
Copyright © 2020-2023  润新知