跟随大神实现简单的Vue框架
自己用vue也不久了，学习之初就看过vue实现的原理，当时看也是迷迷糊糊，能说出来最基本的，但是感觉还是理解的不深入，最近找到了之前收藏的文章，跟着大神一步步敲了一下简易的实现，算是又加深了理解。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="app">
{{name}}
<p v-if="isShow"> <span>{{name}}</span>
</p>
<input type="text" id="a" v-model="name"> </div> <script> function compile(node, vm) { var reg = /\{\{(.*)\}\}/;
if (node.nodeType === 1) {
var attr = Array.prototype.slice.call(node.attributes);
//解析属性
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue;
node.addEventListener('input', function (e) { vm[name] = e.target.value;
//eval(`vm.data.${name}=e.target.value`)
console.log(vm)
})
node.value = eval(`vm.${name}`);
node.removeAttribute('v-model');
}
if (attr[i].nodeName == 'v-if') {// 这里是我自己加的指令，真正肯定不是这样玩的吧
var name = attr[i].nodeValue;
var isInsert = eval(`vm.${name}`);
if (!isInsert) {
node = '';
return node;
} else {
node.removeAttribute('v-if');
} }
} }
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1;
name = name.trim();
//node.nodeValue = eval(`vm.data.${name}`);
new Watcher(vm, node, name)//这里给每个属性文本节点生成一个Watcher对象，嗯，大致跟vue的原理相似
}
}
return node;
} function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment();
var child; while (child = node.firstChild) {
child = compile(child, vm)
if (child !== "") {
if (child.childNodes.length != 0) {
child.append(nodeToFragment(child, vm));
}
} else {
node.removeChild(node.firstChild)
} flag.append(child);
}
return flag;
} function defineReactive(obj, key, val) {
var dep = new Dep();//这里给每个属性生成一个数据订阅中心，它可以存储订阅它的所有watcher,
Object.defineProperty(obj, key, {
get: function () {
if (Dep.target) dep.addSub(Dep.target);//这里的Dep.target是对应的Watcher对象，这里是dep对象调用addSub，我看别人说的vue源码是在Watcher对象实现addSub操作的
return val;
},
set: function (newVal) {
if (newVal === val) return;
console.log('修改了', key) val = newVal;
dep.notify();//数据更新了，就通知所有的观察者实例
}
})
} function observer(obj, vm) {
Object.keys(obj).forEach(function (key) {
defineReactive(vm, key, obj[key]);
})
} function Watcher(vm, node, name) {
Dep.target = this;//在实例化新的watcher对象时把Dep.target赋值为this，也就是每个指令对应的那个watcher对象，这样在下面调用this.update,从而调用this.get时触发数据的get方法，从而触发dep.addSub（Dep.target）,这样这个watcher就被添加进去
this.name = name;
this.node = node;
this.vm = vm;
this.update();
Dep.target = null;//为了保证全局只有一个，在最后需要清空，为下一个指令做准备
}
Watcher.prototype = {
update: function () {
this.get();//更新时调用get()
this.node.nodeValue = this.value; },
get: function () {
this.value = this.vm[this.name]; //会触发vm.data中属性的get方法，进而可以添加watcher到Dep中
}
} function Dep() {
this.subs = [];
}
Dep.prototype = {
addSub: function (sub) {
this.subs.push(sub);
},
notify: function () {
this.subs.forEach(function (sub) {
sub.update();
})
}
} function Vue(options) {
this.data = options.data;
var id = options.el;
var data = this.data;
observer(data, this)
var dom = nodeToFragment(document.getElementById(id), this);
document.getElementById(id).appendChild(dom);
}
var vm = new Vue({
el: 'app',
data: {
text: {
name: 'jay'
},
'name': 'zxf',
isShow: true
}
}) </script>
</body> </html>
以上的备注是我看了文章后自己的一些理解，这个得简单实现跟vue的源码好像是有区别，比如
function defineReactive(obj, key, val) {
var dep = new Dep()
var childOb = Observer.create(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function metaGetter() {
// 如果Dep.target存在，则进行依赖收集
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
}
}
return val
},
set: function metaSetter(newVal) {
if (newVal === val) return
val = newVal
childOb = Observer.create(newVal)
dep.notify()
}
})
}
Watcher.prototype.addDep = function (dep) {
var id = dep.id
if (!this.newDeps[id]) {
this.newDeps[id] = dep
if (!this.deps[id]) {
this.deps[id] = dep
dep.addSub(this)
}
}
}
作者：百度外卖大前端技术团队
链接：https://juejin.im/post/5a44b15e51882538fe631406
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
源码中在dep的get里面并没有直接调用addsub，而是调用
dep.depend(); 而dep.depend() 实际执行了 Watcher.addDep()
这样最终是在Watcher对象的方法里面实现了增加订阅者，感觉好像是订阅者主动要求dep添加自己，而简易框架是，dep主动添加，感觉都差不多吧。，可能原文作者为了方便，而vue可能处于更全面的考虑吧
另外我也懂了vue原理中watcher,dep,observer，compile等这几个对象的概念和他们之间的关系，observer是数据观察者，主要是劫持data数据，添加set，get,并观察数据的变动，若触发了set,就调用dep的notify方法，若触发了get,就会新增watcher到dep的存放观察者的数组中。
另外这个图片也可以说明一切，终于看懂了，以前知道这么连接，只是不知道为什么这么连接的，另外还有一篇文章是讲解关于这幅图的理解的那个是对源码进行解读的，比较详细
vue源码解读，另外还有一篇文章也是大牛自己实现vue的简易框架的，与这个得实现思路略微有所不同：vue简易框架2
跟随大神实现简单的Vue框架的更多相关文章
- Android开发相关的Blog推荐——跟随大神的脚步才能成长为大神
转载:https://blog.csdn.net/zhaokaiqiang1992/article/details/43731967 CSDN 鸿洋:http://blog.csdn.net/lmj6 ...
- 某大神C#框架后台发送信息的查找及破解
最近在博客园瞎逛的时候,发现了某个大神发布的一个c#框架,一看框架,叫牛逼框架,嗯,装B效果太好了,界面很炫,虽然有很多的组件还是不怎么完善,但是,已经可以初步运用于项目了. 先来看看界面: 在进 ...
- 手把手教你从零写一个简单的 VUE
本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...
- 有关UITableViewCell的侧滑删除以及使用相关大神框架MGSwipeTableCell遇到的小问题
提起笔,却不知道从何写起了,今天一整天都耗费在了这个可能根本不算是问题的小问题上,至今仍有一种蛋蛋的忧桑..(噢,不是提笔,是键盘手T_T) 表格视图在项目中就像是每日的家常便饭,在cell上添加侧滑 ...
- 理解vue ssr原理，自己搭建简单的ssr框架
前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些 ...
- ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
- Vue框架简介及简单使用
目录 一.前端框架介绍 二.vue框架简介 三.vue使用初体验 1. vue如何在页面中引入 2. 插值表达式 3. 文本指令 4. 方法指令(事件指令) 5. 属性指令 四.js数据类型补充 1. ...
- java数据类型易错点简单总结，欢迎大神前辈补充！谢谢
数据类型那这边看似简单,花了我很长时间也就是才练到几成"功力"吧.还希望路过的大神在下面补充,菜鸟的我深受感谢! 首先看两个思考题 思考题1:请问下面这个有没有问题 double ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- jq轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 嵌入式linux学习笔记
1.溢出:两个数相加,如果最高位的进位和此高位的进位不同,则产生溢出. 2.进位和溢出的概念不一样. 3.预取(取得是编译后得到的机器代码)-->译码-->执行 4.ARM的汇编指令长度是 ...
- fiddler抓包可以抓到电脑数据抓不到手机上的数据------防火墙问题
1.确保手机与电脑处于同一局域网,网络没问题,手机代理设置无误 2.确保fiddler设置没有任何问题 3.如果此时还是无法抓包,请打开控制面板----Windows防火墙------允许程序通过Wi ...
- JavaScript学习笔记 - 入门篇（2）- 常用互动方法
输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用""括起,直 ...
- 在后端C#中 call web api
我们要想使用web api, 需要首先在azure 中创建application. (如何创建application可以参考我的另一篇blog 从O365中获取users到D365中 ) Get 我们 ...
- 实现TabControl 选项卡首个标签缩进的方法
借用一张网图说明需求 在网上找了一圈,没有找到直接通过API或者重绘TabControl 的解决方法,最后灵机一动想到了一个折(tou)中(lan)的解决办法 Tab1.TabPages.Clear( ...
- Mac中Apache常用命令
Apache常用命令记录,还是记一下吧,总是忘记. Apache常用命令: # sudo apachectl start // 启动Apache服务 # sudo apachectl stop // ...
- HttpServletReqeust、HttpServletResponse
HttpServletRequest:一次来自客户端的请求的相关信息 请求行 request.getMethod() 获取http请求方式 request.getR ...
- 48)PHP,工厂模式
为啥需要工厂模式啊: (原来是生产类的工具——————————) 工厂类的代码格式: <?php class factory{ //Instance表示“实例”,“对象” static func ...
- android studio 通过界面快速查看md5
https://www.jianshu.com/p/989c0be557f0