跟随大神实现简单的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框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- 寒假day03-python
今天完成了毕设登录注册.填报等功能的界面优化,同时总结了python网络课程的部分知识点 1.修改jupyter notebook默认路径:进入cmd:(1)cd /d F:\(2)jupyter n ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- gitKraken取消/关闭全屏
如果你找不到在哪里设置的 这是配置文件 注意 fullScreen 字段,改这个字段可以改变是不是全屏,改变之前先关闭软件, 文件目录 第二张图
- 【转】Rendering Problems The following classes could not be instantiated
xml 设计时警告 打开es/values/目录下styles.xml文件. 把:<style name="AppTheme" parent="Theme.AppC ...
- python base 64
python中base64编码与解码 引言: 在一些项目中,接口的报文是通过base64加密传输的,所以在进行接口自动化时,需要对所传的参数进行base64编码,对拿到的响应报文进行解码: Bas ...
- [AC自动机]玄武密码
题目描述 一个长度为\(N\)的母串,有四个元素分别是:N,S,W,N． 有M个长度为100的模式串． 现在要求每个模式串的前缀与母串匹配最长长度． 输入样例 7 3 SNNSSNS NNSS NNN ...
- fscanf的用法
fscanf用于读取字符串数据流,遇到空白字符(空格' '; 制表符'\t'; 新行符'\n')就停止,若要读取完整的一行数据,可以使用格式控制("%[^\n]%*c"),或者使用 ...
- 实用 | PyCharm常用快捷键整理
PyCharm是一款非常受欢迎的Python IDE,用Python高效处理web和数据科学,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理 ...
- Java统计内存
在目标代码前放置 Runtime r = Runtime.getRuntime(); r.gc(); long startMem = r.freeMemory(); // 开始时的剩余内存 目标代码执 ...
- 修改mysql密码报错： You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '
使用这种格式报错: 格式:mysql> set password for 用户名@localhost = password('新密码'); 找到另一种方法解决: ALTER USER 'root ...