zoukankan      html  css  js  c++  java
  • vue源码解析一

      之前说了一下Vue的大概原理,我们自己也来实现了一个,下面我们实际看看Vue的源码;版本:2.x

    1.回顾自己实现的Vue原理  

      我们自己实现的vue的基本原理,分为两个部分,第一部分初始化:通过Oberver给data中每个属性添加get/set方法,在get方法中添加注册Watcher的逻辑,在set方法中添加notify的逻辑;然后编译那些html标签,丢到虚拟节点树中,并且根据节点类型创建不同的Watcher(注意,创建Watcher时候传入的回调函数是用于覆盖该节点中占位符的值);

      第二部分:初始化之后,用户使页面上的数据发生变化,触发set方法,set方法中会触发notify方法,然后就调用所有的Watcher的update方法,进而调用每个Watcher的回调函数,覆盖节点的值,刷新页面数据;

      这个就是Vue的乞丐版了,弄懂了前面几篇文章,再看下图就比较容易了;

    2.查看Vue源码的准备工作

      看源码首先我们要知道Vue的源码到底是什么?不会还有人以为看Vue的源码就是直接看那个vue.js文件吧.....

      那个js文件几万行,什么神人才能直接编写这种js文件啊?

      在我们自己写项目的时候的js文件比较小,直接引入就好了,但是当js文件太大的时候,我们就需要使用一个项目来进行管理了,具体的流程就类似下图所示。

      其中rollup是比webpack更轻量级的插件,只会对js进行构建

     

      

      所以我们看的源码就是在github那里,下载就好:Vue源码 ,下载之后目录:

      提前知道一个东西,js的一个比较大的问题就是没有类型检查,于是有了js的超集Typescript,简称ts,在ts中是支持类型检查和类型推断的;

      flow和ts看起来用法几乎差不多,Vue2.x使用到了flow(当然,3.x就引入了ts了),有兴趣的可以去看看,写法类似下面这种,就是加了变量类型声明而已,用法和js一样的使用;

    3.Vue源码编译流程

      我们看到Vue源码的目录结构,应该能知道这是npm管理的,所以我们可以在package.json中找到相关的打包命令:

      其实就是node去执行scripts/build.js文件,我们看看scripts/build.js文件:

      然后我们看看scripts/config.js中,其实就是编译不同环境下的js文件,这点比较关键!

      后面我们以web/entry-runtime-with-compiler.js入口文件分析创建Vue实例的过程;

     

    4.Vue创建实例

      我们以web/entry-runtime-with-compiler.js入口文件为例,经过了上面的对路径的各种切割映射,最后拼接的目录应该是:src/platforms/web/entry-runtime-with-compiler.js,我们打开这个js文件看看:

      看看那个index.js,发现还要进入到core/index中看看

      core/index文件中可以看到要去instance/index;

     

      instance/index文件中:

  • 相关阅读:
    团队项目简介及视频
    构建之法阅读笔记04
    软件工程结对作业02
    团队项目NABCD
    搜狗输入法人机交互设计的用户体验
    站立会议个人博客5(2016/4/23)
    站立会议个人博客4(2016/4/22)
    典型用户和用户场景描述
    站立会议个人博客3(2016/4/21)
    站立会议个人博客2(2016/4/20)
  • 原文地址:https://www.cnblogs.com/wyq1995/p/14217882.html
Copyright © 2011-2022 走看看