vue3.0源码解析之数据代理Proxy

前言

多年前刚转前端的时候，对频繁的拼接页面元素深恶痛绝，当时是通过封装字符串模版来处理页面的。之后又陆续发现，数据变化后需要频繁的修改dom节点来操作页面，便不得不自己写很多更新的代码，直到出现了vue和react、就转向了框架开发。

手写js原生的年代

如果每一次页面元素都需要手动拼接，工作量会很巨大，因此当时便是通过封装字符串模板来进行数据 + html渲染的。
如下代码：

var htmlTemplate = '<div clssName="demo">' + 
	'<div className="count">${count}</div>' +
'</div>';
function createHtml(data) {
   
	return htmlTemplate.replace(/\$\{[a-z]+\}/g, function(str) {
   
		// 塞入data数据，产出最终渲染的html成果
		var key = str.substring(2, str.length - 1);
		return data[key];
	})
}

通过上面的方法可以实现封装好一个个的html模版，在实际拼接页面的时候只需要通过数据进行自定义的数据代码块进行替换就好了。

数据渲染的问题解决了，现在我们又遇到了另一个棘手的问题

<div>
	<button onclick="increment">计数</button>
	<div clssName="demo">
		<!-- 这边对应到之前的 ${count} -->
		<div className="count">1