简易版本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 ...
随机推荐
- 2015306 白皎 《网络攻防》Exp5 MSF基础应用
2015306 白皎 <网络攻防>Exp5 MSF基础应用 一.基础问题 用自己的话解释什么是exploit,payload,encode. exploit指由攻击者或渗透测试者利用一个系 ...
- cogs791 [HAOI2012] 音量调节
大水题 这种题谁不能1A谁就吔屎/退役吧(说的就是我) 设dp[i][j]表示调完前i个音量为j有没有可能 没了 // It is made by XZZ // Fei Fan Ya Xi Lie~~ ...
- restful framework之权限组件
一.权限简介 只用超级用户才能访问指定的数据,普通用户不能访问,所以就要有权限组件对其限制 二.局部使用 from rest_framework.permissions import BasePerm ...
- 网络编程的演进——从Apache到Nginx
Apache 1.Apache HTTP服务器是 Robert McCool 在1995年写成,并在1999年开始在Apache软件基金会的 框架下进行开发. 由于Apache HTTP服务器是基金会 ...
- Python distribute到底使用package_data还是MANIFEST.in?
今天看Flask的文档,里面提到如何通过distribute发布你自己的Python包.讲包含文件的时候,提到要用MANIFEST.in并将include_package_data设置为True. 由 ...
- 【DOS】COPY命令
一:文件复制COPY 指令说明:复制一个或更多文件到指定位置,可以合并文件 语法:COPY [/A/B] source[/A|/B] [+source [/A|/b] [+...]][destinat ...
- Frida----frida tools的使用
翻译自官方网站:https://www.frida.re/docs/home/ 如果有理解不对的地方,请大家指出 frida Cll frida -U 包名 调试连接到电脑上设备中的应用 frida ...
- java学习(四)修饰符、运算符、循环结构、分支结构
修饰符 一般是放在定义类,方法,变量的最前端 访问控制修饰符 修饰符 当前类 同一包内 子孙类 其他包 public Y Y Y Y protected Y Y Y N default Y Y N N ...
- Bailian 2808 校门外的树(入门线段树)
题目链接:http://bailian.openjudge.cn/practice/2808?lang=en_US 总时间限制: 1000ms 内存限制: 65536kB 描述 某校大门外长度为L的马 ...
- 基础的 sparkSQL操作
spark连接mysql操作 数据库jdbc 连接封装 package test.com import org.apache.spark.sql.{DataFrame, SparkSession} / ...