前端培训vue 源码分析

 说明
1) 分析 vue 作为一个 MVVM 框架的基本实现原理 数据代理 模板解析
数据绑定
2) 不直接看 vue.js 的源码

3) 剖析 github 上某基友仿 vue 实现的 mvvm 库

4) 地址:https://github.com/DMQ/mvvm
7.2. 准备知识
1) [].slice.call(lis): 将伪数组转换为真数组

2) node.nodeType: 得到节点类型

3) Object.defineProperty(obj,propName,{}): 给对象添加/修改属性(指定描述符) configurable:true/false 是否可以重新 define enumerable:true/false 是否可以枚举(for..in/keys()) value: 指定初始值 writable:true/falsevalue 是否可以修改 get: 回调函数, 用来得到当前属性值 set: 回调函数, 用来监视当前属性值的变化

4) Object.keys(obj): 得到对象自身可枚举的属性名的数组

5) DocumentFragment: 文档碎片(高效批量更新多个节点)

6) obj.hasOwnProperty(prop): 判断 prop 是否是 obj 自身的属性
数据代理
1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)

2) vue 数据代理: 通过 vm 对象来代理 data 对象中所有属性的操作

3) 好处: 更方便的操作 data 中的数据

4) 基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符 b. 所有添加的属性都包含 getter/setter c. getter/setter 内部去操作 data 中对应的属性数据
模板解析
1. 模板解析的基本流程
1) 将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象中

2) 对 fragment 中的所有层次子节点递归进行编译解析处理 * 对大括号表达式文本节点进行解析 * 对元素节点的指令属性进行解析 * 事件指令解析 * 一般指令解析

3) 将解析后的 fragment 添加到 el 中显示

2. 模板解析(1): 大括号表达式解析
1) 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1 name

2) 从 data 中取出表达式对应的属性值

3) 将属性值设置为文本节点的 textContent

3. 模板解析(2): 事件指令解析
1) 从指令名中取出事件名

2) 根据指令的值(表达式)从 methods 中得到对应的事件处理函数对象

3) 给当前元素节点绑定指定事件名和回调函数的 dom 事件监听

4) 指令解析完后, 移除此指令属性

4. 模板解析(3): 一般指令解析
1) 得到指令名和指令值(表达式) text/html/class msg/myClass

2) 从 data 中根据表达式得到对应的值

3) 根据指令名确定需要操作元素节点的什么属性 *v-text—textContent 属性 *v-html—innerHTML 属性 *v-class–className 属性

4) 将得到的表达式的值设置到对应的属性上


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)