功能:
- 具备数据双向绑定
- 响应式数据
- 在数据更替时,Node 里的默认文字依旧显示
未开发:
- virtual DOM
- Component
- 数据暂不支持 Array
文件结构 -initData 将 data 中的数据绑定到 mVue 的实例中,以及将数据变成响应式。 -observe 监听数据并响应,即核心 Object.defineProperty(object, key, {get,set}) -dep 收集依赖、触发监听器 -complier 解析 HTML,在遇到数据时,绑定一个监听器 Watcher并触发。 -watcher 监听器,派发更新
<span>{{author}}</span>
<input type="text" m-model="author">
<span>{{author}}</span>
开发过程: vue 源码都在 src 文件里
src
├── compiler # 编译
├── core # 核心代码
├── components #组件
├── global-api #公共api
├── instance #实例
├── observer #观察
├ array.js #数组的处理
├ dep.js #收集依赖
├ index.js
├ scheduler.js
├ traverse.js
├ watcher.js #watcher 类
├── util #工具函数
├── vdom #虚拟 dom
├ config.js
├ index.js
├── platforms # 不同平台的支持(web、小程序)
├── server # 服务端渲染
├── sfc # .vue 文件解析
├── shared # 公共方法
当 new Vue时,会先调用 this._init(options) 方法,这个方法定义在 init.js 中,init 做了initLifecycle()初始化生命周期、initEvents(vm)初始化事件、initRender(vm)初始化渲染、callHook(vm, 'beforeCreate')初始化实例之前生命、initInjections(vm)解决prop||data之前的事件、initState(vm)初始化各种数据(data、prop、computed、watch)等事情。 本次研究的是 initState(vm) 中的 initData(vm)。
具备 模版语法、表单输入绑定 的功能
npm run serve
//开启服务
添加简单的服务端实现,监听端口。http://127.0.0.1:8800
npx webpack
//在 dist 文件夹生成代码块