简易版本vue的实现和注解
本文参考的是前辈的简易版本Vue实现:http://www.cnblogs.com/canfoo/p/6891868.html,感谢。前辈GitHub地址:https://github.com/canfoo/self-vue
虽然前辈的文章写的已经很浅显了,但依然没有一开始就看懂代码啊,对了,前辈的文章有它的github地址,上面可以直接下载代码。
好在我虽不才却能坚持,看了一下午终于是入了门,再经过一些试验性的代码修改和测试,终于明白是怎么回事了。现在总结如下。
核心思路:V1还不算完全形态的Vue,所以直接从V2看起。
具体思路:
1,将Vue对象里面的data全部作一次监听。通过get的方式。
2,一旦data里面的数据发生改变,则被set方法劫持。第一层代理劫持产生内层的赋值
3,内层触发了更新依赖的函数,js代码层次的数据变化更新到dom上面
4,更新函数通过更该dom节点来更新dom,这个时候更新的不在innerHTML
将Vue对象里面的data全部作一次监听。通过get的方式。
下图是遍历,遍历的结果是data里面的数据,都执行get方法,实际是通过defineProperty的get方法实现的。
于是都被缓存到observer里面。
一旦data里面的数据发生改变,则被set方法劫持。第一层代理劫持产生内层的赋值
为了直接修改data里面数据,而不是通过data.方式修改数据,所以做了两层代理劫持。这个原文作者也有说到。
外层代理
内存代理
内层触发了更新依赖的函数,js代码层次的数据变化更新到dom上面
也就是set下的通知函数。实际是告诉Watcher执行update。
更新函数通过更该dom节点来更新dom,这个时候更新的不在innerHTML
这里涉及一个知识点:document.createDocumentFragment();DocumentFragments
是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。
直接修改node的内容就会同步到dom中。
简易版本vue的实现和注解的更多相关文章
- 简易版本vue的实现
用了Vue也有两年时间了,一直以来都是只知其然,不知其所以然,为了能更好的使用Vue不被Vue所奴役,学习一下Vue底层的基本原理. Vue官网有一段这样的介绍:当你把一个普通的JavaScript对 ...
- JavaScript之Promise实现原理(手写简易版本 MPromise)
手写 Promise 实现 Promise的基本使用 Promise定义及用法详情文档:Promise MAD文档 function testPromise(param) { return new P ...
- ABP实践(1)-通过官方模板创建ASP.NET Core 2.x版本+vue.js单页面模板-启动运行项目
1,打开ABP官网下载模板页面 2,根据下图选择对应的选项及输入项目名 注:上图验证码下方的选择框打钩表示下载最新稳定版,不打钩表示下载最新版本(有可能是预览版) 3,解压下载的压缩包 解压之后是个a ...
- 实现一个简易的vue的mvvm(defineProperty)
这是一个最近一年很火的面试题,很多人看到这个题目从下手,其实查阅一些资料后,简单的模拟还是不太难的: vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的ge ...
- jsp中简易版本的图片上传程序
1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO ...
- 简易版 vue实现
Vue-mini 完整的Demo示例:git@github.com:xsk-walter/Vue-mini.git 一.Vue实例 构造函数: $option\ $el\ $data 判断是否存在 通 ...
- golang为LigerUI编写简易版本web服务器
package main import ( "io/ioutil" "log" "net/http" "os" ) va ...
- 一个简易版本的lua debugger实现
introduction 工欲善其事,必先利其器.lua作为一门动态语言,虽然我已经习惯了使用print来进行代码调试,但是还是有很多童鞋觉得一款好用的调试器能更好的进行lua代码编写.所以在以前接手 ...
- 用java语言写一个简易版本的登录页面,包含用户注册、用户登录、用户注销、修改密码等功能
package com.Summer_0421.cn; import java.util.Arrays; import java.util.Scanner; /** * @author Summer ...
随机推荐
- 补交20145226蓝墨云班课 -- MyOD
蓝墨云班课 -- MyOD.java 具体描述: 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能. 提交测试代码和运行结果截图,加上学号水印,提 ...
- 33 -FTP文件传输
1.需求 2.流程图 3.自己的版本 4.老师评语 5.修改后的代码 6.修改后版本
- Openstack入门篇(十七)之Cinder服务-->安装并配置一个本地存储节点
怎样为块存储服务安装并配置存储节点.为简单起见,这里配置一个有一个空的本地块存储设备的存储节点.这个向导用的是 /dev/sdb,此处选用linux-node1节点作为存储节点,需要在vmware中添 ...
- cogs1538 [AHOI2005]LANE 航线规划
套路题+裸题 首先肯定离线,倒过来处理,删边->加边 连边的时候,如果不连通就连,否则在这两个点的链上打个覆盖标记,查询的时候输出没被覆盖的路径条数 #include<cstdio> ...
- js中for循环的多种方式
For/In 循环 JavaScript for/in 语句循环遍历对象的属性: 实例 var person={fname:"John",lname:"Doe" ...
- python类与对象的组合与继承
1.把类的对象实例化放到一个新的类里面叫做类的组合,组合就是指几个横向关系的类放在一起,纵向关系的类放在一起是继承,根据实际应用场景确定.简单的说,组合用于“有一个”的场景中,继承用于“是一个”的场景 ...
- python游戏编程——乌龟和鱼类场景编程
综合举例: 游戏编程:按以下要求定义一个乌龟类和鱼类并尝试编写游戏. O 假设游戏场景为范围(x, y)为0<=x<=10,0<=y<=10 · 游戏生成1只 ...
- 宝塔中mysql数据库命名小坑
今天在通过宝塔新建网站,添加mysql数据库,名字中间有下划线,发现能够创建成功,但是实际链接后,是没有这个数据库的.是宝塔的原因还是liunx服务器的原因? 不支持下划线的数据库名字吗? 比如 bo ...
- JDBC Mysql 驱动连接异常
在做JDBC连接Mysql的时候遇到了三个异常: 第一个是:mysql8.0 caching_sha2_password 这个异常是由于是因为在mysql8.0之前的密码规则是mysql_native ...
- egret性能优化总结
## 来自官方的优化建议 详见:http://edn.egret.com/cn/article/index/id/287 (1) 少使用Alpha混合. (2) 显式停止计时器,让它们准备好进行垃圾回 ...