本文参考的是前辈的简易版本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的实现和注解的更多相关文章

  1. 简易版本vue的实现

    用了Vue也有两年时间了,一直以来都是只知其然,不知其所以然,为了能更好的使用Vue不被Vue所奴役,学习一下Vue底层的基本原理. Vue官网有一段这样的介绍:当你把一个普通的JavaScript对 ...

  2. JavaScript之Promise实现原理(手写简易版本 MPromise)

    手写 Promise 实现 Promise的基本使用 Promise定义及用法详情文档:Promise MAD文档 function testPromise(param) { return new P ...

  3. ABP实践(1)-通过官方模板创建ASP.NET Core 2.x版本+vue.js单页面模板-启动运行项目

    1,打开ABP官网下载模板页面 2,根据下图选择对应的选项及输入项目名 注:上图验证码下方的选择框打钩表示下载最新稳定版,不打钩表示下载最新版本(有可能是预览版) 3,解压下载的压缩包 解压之后是个a ...

  4. 实现一个简易的vue的mvvm(defineProperty)

    这是一个最近一年很火的面试题,很多人看到这个题目从下手,其实查阅一些资料后,简单的模拟还是不太难的: vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的ge ...

  5. jsp中简易版本的图片上传程序

    1.下载相应的组件的最新版本 Commons FileUpload 可以在http://jakarta.apache.org/commons/fileupload/下载 附加的Commons IO   ...

  6. 简易版 vue实现

    Vue-mini 完整的Demo示例:git@github.com:xsk-walter/Vue-mini.git 一.Vue实例 构造函数: $option\ $el\ $data 判断是否存在 通 ...

  7. golang为LigerUI编写简易版本web服务器

    package main import ( "io/ioutil" "log" "net/http" "os" ) va ...

  8. 一个简易版本的lua debugger实现

    introduction 工欲善其事,必先利其器.lua作为一门动态语言,虽然我已经习惯了使用print来进行代码调试,但是还是有很多童鞋觉得一款好用的调试器能更好的进行lua代码编写.所以在以前接手 ...

  9. 用java语言写一个简易版本的登录页面,包含用户注册、用户登录、用户注销、修改密码等功能

    package com.Summer_0421.cn; import java.util.Arrays; import java.util.Scanner; /** * @author Summer ...

随机推荐

  1. 2015306 白皎 《网络攻防》Exp5 MSF基础应用

    2015306 白皎 <网络攻防>Exp5 MSF基础应用 一.基础问题 用自己的话解释什么是exploit,payload,encode. exploit指由攻击者或渗透测试者利用一个系 ...

  2. cogs791 [HAOI2012] 音量调节

    大水题 这种题谁不能1A谁就吔屎/退役吧(说的就是我) 设dp[i][j]表示调完前i个音量为j有没有可能 没了 // It is made by XZZ // Fei Fan Ya Xi Lie~~ ...

  3. restful framework之权限组件

    一.权限简介 只用超级用户才能访问指定的数据,普通用户不能访问,所以就要有权限组件对其限制 二.局部使用 from rest_framework.permissions import BasePerm ...

  4. 网络编程的演进——从Apache到Nginx

    Apache 1.Apache HTTP服务器是 Robert McCool 在1995年写成,并在1999年开始在Apache软件基金会的 框架下进行开发. 由于Apache HTTP服务器是基金会 ...

  5. Python distribute到底使用package_data还是MANIFEST.in?

    今天看Flask的文档,里面提到如何通过distribute发布你自己的Python包.讲包含文件的时候,提到要用MANIFEST.in并将include_package_data设置为True. 由 ...

  6. 【DOS】COPY命令

    一:文件复制COPY 指令说明:复制一个或更多文件到指定位置,可以合并文件 语法:COPY [/A/B] source[/A|/B] [+source [/A|/b] [+...]][destinat ...

  7. Frida----frida tools的使用

    翻译自官方网站:https://www.frida.re/docs/home/ 如果有理解不对的地方,请大家指出 frida Cll frida -U 包名 调试连接到电脑上设备中的应用 frida ...

  8. java学习(四)修饰符、运算符、循环结构、分支结构

    修饰符 一般是放在定义类,方法,变量的最前端 访问控制修饰符 修饰符 当前类 同一包内 子孙类 其他包 public Y Y Y Y protected Y Y Y N default Y Y N N ...

  9. Bailian 2808 校门外的树(入门线段树)

    题目链接:http://bailian.openjudge.cn/practice/2808?lang=en_US 总时间限制: 1000ms 内存限制: 65536kB 描述 某校大门外长度为L的马 ...

  10. 基础的 sparkSQL操作

    spark连接mysql操作 数据库jdbc 连接封装 package test.com import org.apache.spark.sql.{DataFrame, SparkSession} / ...