关于javascript:微型Vue框架实现Part1基本目录结构

概述:

  • 理论开发中,vue框架在浏览器中就是一个实例化的Vm对象,在main.js中配置这个Vue这个对象,框架会主动的实例化。
  • 罕用的性能是有V-for;V-if,生命周期,数据监听,事件绑定,页面挂载;咱们将在前面缓缓的实现这些性能。

根本目录构造

  • core文件是整个框架的外围
  • instance文件性能是实例化对象
  • 图示

文件的基本功能

  • core/index.js入口文件

     import Due from "./instance/index.js"
    
     export default Due;
  • instance/index.js文件夹入口

    import {initMixin} from "./init.js"
    
    function Due(options) {
      this._init(options);
    }
    
    // 在原型链上增加办法
    initMixin(Due);
    
    export default Due;
  • init.js文件

    /**
     * 给Due对象的原型链增加办法
     */
    import {constructProxy} from "./proxy.js"
    
    
    let uid = 0
    
    export function initMixin (Due) {
      Due.prototype._init = function (options) {
          const vm = this;
          vm.uid = uid++;
          vm._isDue = true;
          vm.data = null
    
          // 初始化数据
          if(options && options.data) {
              vm.data = constructProxy(vm, options.data, "")
          }
    
    
          // 初始化created办法
          // 初始化methods
          // 初始化computed
          // 初始化el并挂载
      }
    }
    

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理