vue.js数据绑定 ,通过对象的set/get属性

	// Vue.js 数据绑定就是通过对象的set/get属性完成的
		// 在vue组件配置对象中声明的数据,会在创建组件对象时,会以set/get属性的方式将数据作为属性添加到组件对象上,在set方法添加了重新渲染组件的代码.所在,每当组件中的数据发生变化,执行set函数,先做属性赋值,然后执行渲染
		var main = document.getElementById("main")
		let template = main.innerHTML
		
		function initData(){
			// 正常的局部变量生命周期,  执行函数创建局部变量->使用局部变量->函数执行结束销毁局部变量
			let num = null
			let str
			
			Object.defineProperty(window, "num", {
				// 外部函数initdata中声明了一个内部函数set,并且在内部函数中使用到了外部函数的局部变量,这个内部函数称之为闭包函数.
				// 闭包特点:1.函数套函数 2.内部函数必须使用外部函数的局部变量
				// 闭包函数中由于使用了使用了外部函数的局部变量,导致外部函数执行完成后局部变量无法得到及时释放,导致内存泄露
				set(v){
					num = v
					// 同步渲染页面
					// 正则表达式
					render()
					
				},
				get(){
					console.log("num属性的get函数被调用了")
					return num
				}
			})
			
			Object.defineProperty(window, "str", {
				// 外部函数initdata中声明了一个内部函数set,并且在内部函数中使用到了外部函数的局部变量,这个内部函数称之为闭包函数.
				// 闭包特点:1.函数套函数 2.内部函数必须使用外部函数的局部变量
				// 闭包函数中由于使用了使用了外部函数的局部变量,导致外部函数执行完成后局部变量无法得到及时释放,导致内存泄露
				set(v){
					str = v
					// 同步渲染页面
					// 正则表达式
					render()
				},
				get(){
					console.log("num属性的get函数被调用了")
					return str
				}
			})
			
			function render(){
				let html = template
				var reg = /{{([a-zA-Z0-9_$]+)}}/g
				var arr
				// 循环查找符合正则的数据
				while (arr = reg.exec(html)){
					console.log(arr)
					// window["num"]
					// 取出window中对应的属性值
					let v = window[arr[1]]
					// 替换对应的属性
					html = html.replace("{{"+arr[1]+"}}", v)
				}
				// html就是替换后的代码
				main.innerHTML = html
			}
		}
		
		initData()
		
		// 设置window的num属性,执行num属性的set函数
		num = 10
		// 访问window的num属性,执行num属性的get函数
		console.log(num)
		str = "hello"
		// num = 20
		
		str = "word"
		
		
		function btnClick(){
			
			str = "你好"
			num = 23333
		}