微型Vue框架实现Part2——数据代理实现
微型Vue框架构建Part3——$Mount方法实现
微型Vue框架构建Part4——Render渲染前
概述:
- 实际开发中,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并挂载 } }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。