#数据驱动模型
vue的执行流程
1.获得模板:模板中有位置
2.利用Vue构造函数中所提供的数据来填充模板的位置,得到可以在页面中显示的“标签”了。
3.将标签替换页面中原来位置的标签
Vue利用我们提供的数据和页面中模板生成了一个新的HTML标签(node元素),替换到了页面中放置模板的位置(元素整个被替换掉) 流程:DOM – 字符串模板-- VNode – 真正的DOM
简单模拟
<!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>数据驱动</title>
</head>
<body>
<div id="root">
<div>
<p>{{name}} -- {{message}}</p>
</div>
</div>
<script>
let rkuohao = /\{\{(.+?)\}\}/g;
let tmpNode = document.querySelector("#root");
let data = {
name: "我是一个新的name",
message: "一个消息"
};
function compiler(template, data) {
let childNodes = template.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let type = childNodes[i].nodeType; //1元素3文本节点
if (type === 3) {
let txt = childNodes[i].nodeValue;
txt = txt.replace(rkuohao, function(_, g) { //replace使用正则匹配一次,函数会被调用一次
console.log(1);
let key = g.trim(); //写在双花括号的东西
let value = data[key];
// 将{{xxx}}这个值替换
return value;
})
childNodes[i].nodeValue = txt;
} else if (type === 1) {
// 元素,考虑它有没有子元素,是否需要其子元素进行 判断是否要插值
compiler(childNodes[i], data);
}
}
}
let generateNode = tmpNode.cloneNode(true);
console.log(generateNode);
compiler(tmpNode, data);
console.log(tmpNode);
// 由于两个数据都引没有生成新的template,所以说看到的是直接在页面中更新的数据,因为DOM是引用类型 这样做模板就没有
root.parentNode.replaceChild(tmpNode, root);
</script>
</body>
</html>
