一. vue 渲染页面后,会替换我们的参数 el: '#root'元素
二、渲染步骤
- 字符串模板 -> AST(抽象语法树)
- AST -> VNode(虚拟DOM)
- VNode -> DOM
三、 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<div id="root">
<header>
<h1>{{ title }}</h1>
</header>
<div>{{ msg }}-{{footer}}</div>
<p>{{obj.name}}</p>
<h1>{{arr}}</h1>
</div>
</div>
<script>
let data = {
title: '标题',
msg: '消息',
footer: '结尾',
obj: {
name: '夏'
},
arr: [0,1]
}
let app = new Vue2({
el: '#root',
data
})
</script>
</body>
</html>
四、index.js
class Vnode {
constructor(tag, attrs, type, value) {
this.tag = tag && tag.toLowerCase();
this.attrs = attrs;
this.type = type;
this.value = value;
this.children = [];
}
appendChild(vNode) {
this.children.push(vNode)
}
}
class Vue2 {
constructor(opt) {
this._el = opt.el;
this.$el = document.querySelector(opt.el);
this._data = opt.data;
this._parentNode = this.$el.parentNode;
this.setReative(opt.data)
this.mounted()
}
objectReative(target, key, value) {
let dep;
Object.defineProperty(target, key, {
get: () => {
if (value instanceof Object && !!value && typeof value !== 'function') {
this.setReative(value)
}
return value
},
set: (newval) => {
value = newval
this.mounted()
}
})
}
setReative(data) {
Object.keys(data).forEach(key => {
this.objectReative(data, key, data[key])
})
}
getDeepVal(string, data) {
let arr = string.split('.')
let val = data
arr.forEach(item => {
val = val[item]
})
return val
}
createAst(node) {
let vNode = {};
let type = node.nodeType
if (type === 1) {
let attrs = [...node.attributes]
attrs = attrs.map(attr => ({
name: attr.name,
value: attr.nodeValue
}))
vNode = new Vnode(node.nodeName, attrs, 1, undefined)
if (node.childNodes?.length) {
node.childNodes.forEach(childNode => {
vNode.appendChild(this.createAst(childNode))
})
}
} else if (type === 3) {
vNode = new Vnode(undefined, undefined, 3, node.nodeValue)
}
return vNode;
}
createRender() {
let ast = this.createAst(this.$el)
return function render() {
let vNode = this.compiler(ast)
return vNode
}
}
compiler(vNode) {
let newVNode = {}
let type = vNode.type
if (type === 1) {
newVNode = new Vnode(vNode.tag, vNode.attrs, 1, undefined)
if (vNode.children?.length) {
vNode.children.forEach(childVNode => {
newVNode.appendChild(this.compiler(childVNode))
})
}
} else if (type === 3) {
let value = vNode.value.replace(/{{(.+?)}}/g, (_, g) => {
let key = g.trim()
return this.getDeepVal(key, this._data)
})
newVNode = new Vnode(undefined, undefined, 3, value)
}
return newVNode
}
parseNode(vNode) {
let node;
let type = vNode.type
if (type === 1) {
node = document.createElement(vNode.tag)
vNode.attrs.forEach(attr => {
node.setAttribute(attr.name, attr.value)
})
if (vNode.children) {
vNode.children.forEach(item => {
node.appendChild(this.parseNode(item))
})
}
} else if (type === 3) {
node = document.createTextNode(vNode.value)
}
return node
}
update(vNode) {
let realDom = this.parseNode(vNode)
this._parentNode.replaceChild(realDom, document.querySelector(this._el))
}
mounted() {
this.render = this.createRender()
const mounted = () => {
this.update(this.render())
}
mounted()
}
}