本文参考的是前辈的简易版本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. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 4552: [Tjoi2016&Heoi2016]排序

    4552: [Tjoi2016&Heoi2016]排序 链接 分析: 因为只询问一次,所以考虑二分这个数.显然是没有单调性的,但是我们可以二分所有大于等于mid的数中,是否有满足条件的x(而不 ...

  3. java 或者 js 获取项目访问路径(域名)

    /** * 获得站点url * @return */ public String getWebUrl(){ String url = getRequest().getScheme() + " ...

  4. 服务器路由配置--Route

    第1章 命令配置 虚拟服务器 网卡配置信息 虚拟网卡名称 虚拟网卡模式 服务器01 eth1 10.0.0.10/24 nat模式 服务器02 eth2 10.0.0.11/24 nat模式 eth3 ...

  5. nginx Location正则表达式

    1. Location正则表达式 1.1. location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作. ...

  6. linux增加硬盘 磁盘分区格式化及挂载

    nux磁盘分区格式化及挂载 意义: 给linux 系统服务器扩容, 加一块硬盘 实验环境: virtualBox虚拟软件  + centos6.5 第一步: 添加硬件 硬盘 (我这里用virtualB ...

  7. SURF算法的一篇翻译与论证

    原文地址:http://www.sohu.com/a/157742015_715754 SURF: Speeded Up Robust Features 摘要 本文提出了一种新型的具有尺度和旋转不变特 ...

  8. XGB算法梳理

    学习内容: 1.CART树 2.算法原理 3.损失函数 4.分裂结点算法 5.正则化 6.对缺失值处理 7.优缺点 8.应用场景 9.sklearn参数 1.CART树 CART算法是一种二分递归分割 ...

  9. OO第四次作业-对前三次作业总结

    第一次作业由于直接没怎么学过java,全靠一星期速成,前几天看了java的语法,但是因为光看没有打代码,学习效果并不是特别好.由面向过程转向面向对象,不是特别清楚该怎么办,虽然写的是两个类,但实际上是 ...

  10. struts2 中怎样获取HttpServletReqest

    struts2 中怎样获取HttpServletRequest 和HttpServletResponse 提供两种方法 第一种通过调用ServletActionContext这个类源代码中提供这个对象 ...