了解 -- 响应式工作原理（一） · Vue&&TypeSprict--基础总结

>[success] # 了解 -- 响应式工作原理（一） ~~~ 1.简单视图更新例子,这里先明白是当我们赋值的时候视图发生变化，因此下面案例在set ~~~ >[danger] ##### 单个数据简单vue视图响应模型 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> </head> <body> <div id="app">hello</div> <button id="changeViwe">触发视图更新 </button> </body> <script> // 模拟vue中的data 数据 let data = { msg: 'hello' } // 模拟vue 的实例 let vm = {} // 使用 Object.defineProperty 做数据劫持 // 也就是当数据改变触发一些关联动作 Object.defineProperty(vm, 'msg', { enumerable: true, configurable: true, get() { return data.msg }, set(newValue) { if (newValue === data.msg) return data.msg = newValue // 触发视图上数据变化 document.querySelector('#app').textContent = data.msg } }) document.querySelector('#changeViwe').onclick = () => { vm.msg = '视图更新' } </script> </html> ~~~ >[danger] ##### 响应对象中全部键值对 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> </head> <body> <div id="app">hello</div> <input id="changeName" value="" /> <input id="changeMsg" value="" /> </body> <script> // 模拟vue中的data 数据 let data = { msg: 'hello', name: 'wang' } // 模拟vue 的实例 let vm = {} proxyData(data) function proxyData(data) { // 给每个都通过Object.defineProperty 绑定get 和set Object.keys(data).forEach((key) => { Object.defineProperty(vm, key, { enumerable: true, configurable: false, get() { return data[key] }, set(newValue) { if (newValue === data[key]) return data[key] = newValue document.querySelector('#app').textContent = `${data.name} 说 ${data.msg}` } }) }) } document.querySelector('#changeMsg').addEventListener('input', (e) => { vm.msg = e.srcElement.value }) document.querySelector('#changeName').addEventListener('input', (e) => { vm.name = e.srcElement.value }) </script> </html> ~~~