<body>
<h1>{{title}}</h1>
<p>{{title}}</p>
<p>{{num}}</p>
<script>
// var title = "hello";
// var num = 10;
// vue中数据绑定是通过set，get属性实现的，
// 所以不支持es5的浏览器就不能甩vue
// 在组件配置对象中的data中的数据，在组件创建时，都会被作为set，get属性添加到组件对象上，在set方法中进行了组件的重新渲染，所以每当data中的数据发生变化，页面就会立刻重新渲染。
function initAttr(){
let title;
let num;
Object.defineProperty(window,"title",{
set(v){
title=v;
render();
},
get(){
return title;
}
})
Object.defineProperty(window,"num",{
set(v){
num=v;
render();
},
get(){
return num;
}
})
}
initAttr();
var sourceBody= document.body.innerHTML;
function render() {
// document.body.innerHTML
let reg = /\{\{(\w+)\}\}/g;
let content = sourceBody;
let arr;
while (arr = reg.exec(content)) {
console.log(arr);
content = content.replace(arr[0], window[arr[1]])
};
document.body.innerHTML = content;
// content.replace(reg,)
}
render();
title="hello";
num=10;
setTimeout(() => {
num=100;
render();
}, 2000);
</script>
</body>