剖析手写Vue，你也可以手写一个MVVM框架
剖析手写Vue，你也可以手写一个MVVM框架#
邮箱：563995050@qq.com
github: https://github.com/xiaoqiuxiong
作者：肖秋雄(eddy)
温馨提示：感谢阅读，笔者创作辛苦，如需转载请自觉注明出处哦
Vue MVVM响应式原理剖释
Vue是采用数据劫持配合发布者和订阅者模式，通过Object.definerProperty()来劫持各个属性的setter和setter,在数据变动时，发布消息给依赖收集器Dep，去通知观察者Watcher，触发对应的解释模板回调函数去更新视图。
详细点说就是MVVM作为绑定的入口，整合了Observer，Compile和Watcher三者，通过Observer来劫持且监听数据，通过Compile来解释编译模板指令，然后利用Watcher搭建Observer，Compile之间的联系，达到数据变化=>视图更新，视图交互变化=>数据变化=>视图更新双向绑定的效果。
示列：
手写Vue源码
inex.html
<!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>手写Vue</title>
</head>
<body>
<div id="app">
<h2>{{ person.name }} -- {{ person.age }}</h2>
<h3>{{ person.favorite }}</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h3>{{ msg }}</h3>
<div v-text='person.name'></div>
<div v-text='msg'></div>
<div v-html='htmlStr'></div>
<input type="text" v-model='msg'>
<button v-on:click="handlerClick">点击按钮</button>
<br>
<br>
<div>
数量：
<button v-on:click="sub">-</button>
{{num}}
<button v-on:click="add">+</button>
</div>
</div>
<script src="./Observer.js"></script>
<script src="./MVue.js"></script>
<script>
let vm = new MVue({
el: '#app',
data: {
num: 1,
person: {
name: '小马哥',
age: 18,
favorite: '喜欢大长腿妹妹！'
},
msg: '学习手写Vue框架',
htmlStr: '<h3>我爱学习vue</h3>'
},
methods: {
handlerClick() {
this.msg = '66'
this.person = {
name: '大马哥',
age: 99,
favorite: '喜欢大哥哥！'
}
},
add() {
this.num++
},
sub() {
if(this.num === 1) return
this.num = this.num -1
}
}
})
</script>
</html>
MVue.js
// 入口方法
class MVue {
constructor(options) {
this.$options = options
this.$el = options.el
this.$data = options.data
if (this.$el) {
// 1.实现一个数据观察者
new Observer(this.$data)
// 2.实现一个指令解释器
new Compile(this.$el, this)
// 代理this.$data => this
this.proxyData(this.$data)
}
}
// 代理
proxyData(data) {
for (const key in data) {
Object.defineProperty(this, key, {
get() {
return data[key]
},
set: newVal => {
data[key] = newVal
}
})
}
}
}
// 指令解释器
class Compile {
constructor(el, vm) {
this.el = this.isElementNode(el) ? el : document.querySelector(el)
this.vm = vm
// 1.获取文档碎片对象，放入内存中可以减少页面回流和重绘
const fragment = this.node2Fragment(this.el)
// console.log(fragment);
// 2.编译模板
this.compile(fragment)
// 3.追加子元素到根元素
this.el.appendChild(fragment)
}
compile(fragment) {
// 1.获取每一个子节点
let childNodes = fragment.childNodes
childNodes = this.convertToArray(childNodes)
childNodes.forEach(child => {
if (this.isElementNode(child)) {
// console.log('元素节点', child);
this.compileElement(child)
} else {
// console.log('文档节点', child);
this.compileText(child)
}
if (child.childNodes && child.childNodes.length) {
this.compile(child)
}
});
}
isDirective(name) {
return name.startsWith('v-')
}
isElementNode(node) {
// 判断是否是元素节点
return node.nodeType === 1
}
convertToArray(nodes) {
// 将childNodes返回的数据转化为数组的方法
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0);
} catch (ex) {
array = new Array();
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i]);
}
}
return array;
}
compileElement(node) {
// console.log(node);
// <div v-text="msg"></div>
const attributes = node.attributes
// console.log(attributes);
this.convertToArray(attributes).forEach(attr => {
const { name, value } = attr
// console.log(value);
if (this.isDirective(name)) {
// 是一个指令
const [, dirctive] = name.split('-')
const [dirName, eventName] = dirctive.split(':')
// console.log(dirName, eventName);
// 更新数据 数据驱动视图
compileUtil[dirName](node, value, this.vm, eventName)
// 删除标签上的指令
node.removeAttribute('v-' + dirctive)
}
})
}
compileText(node) {
// 匹配双大括号 {{}}
const content = node.textContent
if (/\{\{(.+?)\}\}/.test(content)) {
// console.log(content);
compileUtil['text'](node, content, this.vm)
}
}
node2Fragment(el) {
// 创建文档碎片
let f = document.createDocumentFragment()
while (el.firstChild) {
f.appendChild(el.firstChild)
}
return f
}
}
const compileUtil = {
text(node, expr, vm) {
let value
if (expr.indexOf('{{') !== -1) {
value = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
// 绑定观察者，将来数据发生变化，触发这里的回调函数去更是对应的视图
new Watcher(vm, args[1], (newVal) => {
this.updater.textUpdater(node, this.getContentVal(expr, vm))
})
return this.getValue(args[1], vm)
})
} else {
value = this.getValue(expr, vm)
new Watcher(vm, expr, (newVal) => {
this.updater.textUpdater(node, newVal)
})
}
this.updater.textUpdater(node, value)
},
html(node, expr, vm) {
let value = this.getValue(expr, vm)
new Watcher(vm, expr, (newVal) => {
this.updater.htmlUpdater(node, newVal)
})
this.updater.htmlUpdater(node, value)
},
model(node, expr, vm) {
const value = this.getValue(expr, vm)
// 绑定更新函数 数据=>视图
new Watcher(vm, expr, (newVal) => {
this.updater.modelUpdater(node, newVal)
})
// 视图=>数据=>视图
node.addEventListener('input', e => {
// 设置值
this.setValue(expr, vm, e.target.value)
})
this.updater.modelUpdater(node, value)
},
on(node, expr, vm, eventName) {
let fn = vm.$options.methods && vm.$options.methods[expr]
node.addEventListener(eventName, fn.bind(vm), false)
},
getValue(expr, vm) {
expr = expr.replace(/\s+/g, "")
return expr.split('.').reduce((data, currentVal) => {
// console.log(currentVal);
return data[currentVal]
}, vm.$data)
},
setValue(expr, vm, newVal) {
expr = expr.replace(/\s+/g, "")
return expr.split('.').reduce((data, currentVal) => {
data[currentVal] = newVal
}, vm.$data)
},
updater: {
textUpdater(node, value) {
node.textContent = value
},
htmlUpdater(node, value) {
node.innerHTML = value
},
modelUpdater(node, value) {
node.value = value
}
},
getContentVal(expr, vm) {
return expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
return this.getValue(args[1], vm)
})
}
}
Observer.js
class Watcher {
constructor(vm, expr, cb) {
this.vm = vm
this.expr = expr
this.cb = cb
// 先把旧值保存起来
this.oldVal = this.getOldVal()
}
getOldVal() {
Dep.target = this
const oldVal = compileUtil.getValue(this.expr, this.vm)
Dep.target = null
return oldVal
}
update() {
const newVal = compileUtil.getValue(this.expr, this.vm)
this.cb(newVal)
}
}
class Dep {
constructor() {
// 定义观察者数组
this.subs = []
}
// 收集观察者
addSub(watcher) {
this.subs.push(watcher)
}
// 通知观察者去更新视图
notify() {
// console.log('通知了观察者');
this.subs.forEach(w => w.update())
}
}
// 数据劫持监听
class Observer {
constructor(data) {
this.observer(data)
}
observer(data) {
if (data && typeof data === 'object') {
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key])
})
}
}
defineReactive(obj, key, value) {
// 递归遍历，直到最后一个值不是对象
this.observer(value)
const dep = new Dep()
Object.defineProperty(obj, key, {
enumerable: true,
configurable: false,
get() {
// 订阅数据变化时，往Dep中添加观察者
Dep.target && dep.addSub(Dep.target)
return value
},
set: (newVal) => {
this.observer(newVal)
// 重新更新值之前先对新值劫持监听
value = newVal
// 告诉Dep通知变化
dep.notify()
}
})
}
}
感谢阅读，笔者创作辛苦，如需转载请自觉注明出处哦
剖析手写Vue，你也可以手写一个MVVM框架的更多相关文章
- 手写MVVM框架 之vue双向数据绑定原理剖析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 实现一个类 Vue 的 MVVM 框架
Vue 一个 MVVM 框架.一个响应式的组件系统,通过把页面抽象成一个个组件来增加复用性.降低复杂性 主要特色就是数据操纵视图变化,一旦数据变化自动更新所有关联组件~ 所以它的一大特性就是一个数据响 ...
- Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏
回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...
- python手写神经网络实现识别手写数字
写在开头:这个实验和matlab手写神经网络实现识别手写数字一样. 实验说明 一直想自己写一个神经网络来实现手写数字的识别,而不是套用别人的框架.恰巧前几天,有幸从同学那拿到5000张已经贴好标签的手 ...
- 看年薪50W的架构师如何手写一个SpringMVC框架
前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...
- 手写一个RPC框架
一.前言 前段时间看到一篇不错的文章<看了这篇你就会手写RPC框架了>,于是便来了兴趣对着实现了一遍,后面觉得还有很多优化的地方便对其进行了改进. 主要改动点如下: 除了Java序列化协议 ...
随机推荐
- Rust入坑指南：智能指针
在了解了Rust中的所有权.所有权借用.生命周期这些概念后,相信各位坑友对Rust已经有了比较深刻的认识了,今天又是一个连环坑,我们一起来把智能指针刨出来,一探究竟. 智能指针是Rust中一种特殊的数 ...
- Lambda 语法
1.java8 Lambda表达式语法简介 (此处需要使用jdk1.8或其以上版本) Lambd表达式分为左右两侧 * 左侧:Lambda 表达式的参数列表 * 右侧:Lambda 表达式中所需要执行 ...
- 【Python】2.19学习笔记 成员运算符,身份运算符,运算符优先级
成员运算符 暂时不会用,等学链表时再补充 \(in\) 与 \(not in\) \(in\):如果在指定序列中找到指定值,则返回\(true\) \(not in\):如果在指定序列中找到指定值,则 ...
- 2019计蒜客信息学提高组赛前膜你赛 #2（TooYoung,TooSimple,Sometimes Naive
计蒜客\(2019CSP\)比赛第二场 巧妙爆零这场比赛(我连背包都不会了\(QWQ\) \(T1\) \(Too\) \(Young\) 大学选课真的是一件很苦恼的事呢! \(Marco\):&qu ...
- Anaconda3环境下安装OpenCV(cv2)
Anaconda3环境下安装OpenCV(cv2) 主要步骤 1 首先查看自己的Anaconda安装的python版本 2 下载相应的OpenCv.whl文件 3 使用cmd安装.whl文件 查看自己 ...
- 关于pytorch在windows上编辑的问题集合
cmake在windows上自动寻找v140(VS2015)的编译器,现在只有VS2013的IDE,所以要修改编译器 修改掉VS2015的编译器名称,报错提示参数CMAKE_C_COMPILER和CM ...
- C/C++、C#、JAVA(一)：代码模板与库代码的引入
代码默认模板 编译性高级编程语言中,几乎每种语言,都有个静态的 main 方法作为程序启动入口,每种语言都有其编写规范.为了学习 C/C++.C#.JAVA四种语言,我们要先从默认代码模板中,慢慢摸索 ...
- Java中的Xml配置文件（新手）
Java中的Xml配置文件,本文是转发转发转发!重要的事情说三遍 一:概念 1.XML Extensible markup Language 可拓展标记语言 2.功能:存储数据(配置文件,在网络中传 ...
- 对tf.nn.softmax的理解
对tf.nn.softmax的理解 转载自律者自由 最后发布于2018-10-31 16:39:40 阅读数 25096 收藏 展开 Softmax的含义:Softmax简单的说就是把一个N*1的向 ...
- c# 自定义含有标题的容器控件(标题背景为渐变色)
1.控件效果图 此效果图中的标题颜色.字号及字体可以在控件属性中设置.标题背景的渐变色及布局内容的背景色也可以在属性中设置. 2.实现的代码(用户控件) public partial class Uc ...