了解 -- 響應式工作原理（一） · 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> ~~~