參考書籍《Vue.js快跑：構建觸手可及的高效能Web應用》第1章 Vue.js基礎--響應式是如何實現的（個人理解）
阿新 • • 發佈：2021-06-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>如何實現響應式</title> </head> <body> <div id="name">內容</div> <button onclick="btClick()">修改內容</button> <script> var obj ={}; Object.defineProperty(obj, 'vue', { get(){ return document.querySelector('#name').innerHTML; }, set(newVal){ document.querySelector('#name').innerHTML=newVal; } }); function btClick(){ obj.vue = "修改後的內容"; } </script> </body> </html>
通過Object.defineProperty設定get和set方法，點選按鈕修改obj.vue值時呼叫set方法通過set方法通知vue頁面發生改變，需要重新渲染