Vue 源码学习- DOM 更新
上一篇文章介绍了 Vue 是如何实现响应式的。响应式带来的最大好处就是自动地更新 DOM,无需手动操作 DOM。所有状态都在 Vue 实例中保存。
而提到更新 DOM,我们自然会想到 react 提出的虚拟 DOM。也就是在 js 中记录 DOM 的状态。当虚拟 DOM 接收到更新请求时,会做一些优化处理,再改变 DOM。由于 DOM 操作是很慢的,所以引入虚拟 DOM 带来的开支还是可以接受的。
Vue 1.0 中是没有虚拟 DOM 的,2.0 版本中引入了这一功能,在 Vue 中,虚拟 DOM 的构造类为 VNode。
VNode上一篇文章中提到,更新 DOM 执行的是这样一个 Watcher
123updateComponent = () => { vm._update(vm._render(), hydrating)}
而 Vue.prototype._render 的返回值正是 VNode。
核心代码为 vnode = render.call(vm._renderProxy, vm.$createElement)其中 render 就是通过 te ...
Vue 源码学习-响应式原理
上一篇文章大致对 Vue 的整体进行了一个介绍。
Vue 作为一个前端mvvm框架最出色的地方就是对数据做了监听。当数据变化时 Vue 会自动执行相应的函数,并且更新 DOM。
免除了 jQuery 时代手动更改 DOM 的麻烦。这也是 Vue 得以在其他平台上执行的原因(weex)。
正如上一篇文章所说,Vue 的数据监听实现主要是在 src/core/instance/state.js 中,下面就好好看一看是如何实现数据监听的。
基础知识核心为 Object.defineProperty() 函数,这里就不做详细介绍了,总而言之就是当我对一个对象的某个键取值或者赋值的时候,能够执行相应的函数。并且取值时函数的返回值为取到的值。
12345678910111213141516171819var ob = {}Object.defineProperty(ob, 'num', { enumerable: true, configurable: true, get () { console.log('get& ...
Vue 源码学习-概览
话说从开始写前端到现在也已经一年了,虽然每天写着业务代码,可是对 Vue 的核心还是不太了解。
只能在写出 bug 时有那么一点点的感悟,因此决定学学 Vue 的源码,希冀能获取一些人生的经验。
项目概览*Vue 版本为2.2.6之后的 dev 分支
文件夹
说明
.github
github 相关说明
benchmarks
一些实例
build
build 配置文件
dist
build 产生的文件
examples
一些例子
flow
flow 文件
packages
不同平台的 compiler 文件
src
源码核心文件
test
测试文件
types
类型定义
可以看出最核心的代码应该是 src 文件夹内的代码。而 Vue 初始化一个 app 的方法为 new Vue(),因此首先得找出 Vue 函数的定义位置。为了简化阅读源码的难度,直接选择 web-runtime-esm 版本( compiler 可以熟悉 runtime 之后再学习)
因此我们从 build 命令开始一步一步地寻找:
package.json &qu ...
查看微信消息
昨晚一个朋友问我如何将微信群消息导出。
我们知道,微信的服务器是不长期保存微信消息的。但是转移数据的时候可以将消息备份到微信的服务器,但是只保存七天而已。
因此,思考了一下,大概有以下几种方案:
备份到微信服务器,写脚本下载到本地(感觉难度很大,因为不了解微信的消息备份协议,而且估计备份的也是数据库?)
利用安卓手机的api,写类似于“抢红包插件”这样的程序,导出微信群中加载好的消息记录(难度很大,需要了解安卓程序的开发)
直接解析微信消息的数据库(可行,并且网上教程很多)
原理将安卓手机root,导出微信数据库文件,解析数据库,并将所需的消息导出
root手机root手机的教程在网上可谓茫茫多,思路大概如下:bootloader解锁(取决于是否有锁,因手机而异),刷recovery,最后通过recovery对手机root
这里就不赘述了,可以自己下载工具root,也可以直接用网上的小白工具root
导出数据库这一步的教程网上也很多啊,重点在于微信的数据库位置位于/data/data/com.tencent.mm/MicroMsg/*/EnMicroMsg.db
***是一大串数字 ...
time waits for no one
这几天又开始折腾起openwrt来了。。工作还没找到却在各种瞎折腾让我有一种time waits for no one的感觉。
折腾的缘由是之前各种抓包之时,想到还不如直接用路由器来抓包,这样就能在将wifi共享给他人之时练习抓包技巧。
说起openwrt,大三时为了晚上断电之后也能愉快的玩手机所以买了一个tp-link mr10u
然后为了能够用上ipv6刷了openwrt进行了各种折腾,期间还弄坏了固件导致不能启动,只能买了一条ttl线拆机重新把系统刷上
结果最终还是以失败告终,唯一的收获是可以把路由器上闪人的led灯给关掉
然后这次折腾终于把ipv6给折腾好了(虽然由于路由器带宽太窄最快下载速度只有3M/s),并且成功挂载上了u盘,装上了tcpdump,为了防止以后忘了还是写下来吧
目标路由器刷上openwrt之后,配置ipv6,挂载u盘扩充容量,安装软件进行抓包
准备安装并学习linux的使用,阅读孙冰的openwrt教程,学习网络原理(要是没看完这一些还是别瞎折腾了,,买个极路由保平安)
openwrt路由器一个,我的路由器系统为BARRIER BREAKER(14 ...
走进科学之如何正确地抓包——破
上一篇博客提到窃听流量的方式多种多样。而实际上通过vpn来窃听流量的方式操作起来不是很好玩。
于是经过上网查找,找到了reverland的博客,于是如法炮制的试验了一下。
由于内容继承了上一篇,因此本文的标题就叫“破”好了。
原理通过arp污染,让局域网内的机器认为本机是网关,窃听上传流量
具体一点的原因是这样:数据包在局域网内传输时,会根据本机维护的一个arp表进行传输。
通过查询arp表内局域网ip对应的mac地址发送数据,也就是说只要让目标机器误以为我的机器的mac地址为网关的mac地址就能窃听机器的上传流量,而只要在我机器上做了转发,目标机器就能正常通信
以下的内容和reverland的博客内容一样。。。
设置系统转发切换为root用户之后,在终端中输入
echo 1 > /proc/sys/net/ipv4/ip_forward
arp污染在进行apr污染之前,可以先查看同一局域网下linux设备或者安卓手机的arp表,使用命令cat /proc/net/arp查看。
进入python的交互模式,输入以下命令
123456789from scapy.all import ...
走进科学之如何正确地抓包
话说在月初的某期“走进科学”上,阿里巴巴的安全专家给广大的无知观众演示了无良wifi的危害。
考虑到我自己也在用着某盘,所以想看看这个危害是如何实现的。
原理通过各种手段窃听流量,过滤出流量中的某盘cookie,获得cookie之后添加到浏览器中恶意登陆
窃听流量首先使用很多用户喜闻乐见的免费(v)代(p)理(n)来窃听流量,众所周知,免费代理的安全性很值得怀疑。
于是我在我自己搭建的ss服务器上窃听流量。
获取服务器的流量信息可以使用tcpdump命令,然后传送到本机的wireshark上就能实时查看了
ssh root@yourhost tcpdump tcp -w - | wireshark -k -i -
输入密码成功登陆之后,用chrome登陆某盘,在wireshark中添加过滤条件http.host==”pan.baidu.com”,这样可以将报文中某盘的报文过滤出来
点选cookie,右键->复制->值,就能将cookie复制下来,方便导入浏览器
添加到浏览器推荐在chrome上安装Cookie Hacker这个插件,安装好之后,先在浏览器 ...