vue.js数据绑定 ,通过对象的setget属性

// 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 }