第三方精简版实现
https://github.com/luobotang/simply-vue
Object.defineProperty 学习，打开控制台分别输入以下内容调试结果
-
userInfo.fuck = "abc"
-
userInfo.fuck
-
userInfo.xxoo = "xxoo"
- userInfo.xxoo
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> </head> <body> <div> <p>你好，<span id='nickName'></span></p> <div id="introduce"></div> </div> </body> <script type="text/javascript"> window.userInfo = {}; Object.defineProperty(userInfo, "fuck", { get: function(){ console.log("当执行userInfo.fuck的时候，会触发get函数"); return document.getElementById('nickName').innerHTML; }, set: function(nick){ console.log("当执行userInfo.fuck = abc 的时候，会触发set函数"); document.getElementById('nickName').innerHTML = nick; } }); Object.defineProperty(userInfo, "xxoo", { get: function(){ console.log("当执行userInfo.xxoo的时候，会触发get函数"); return document.getElementById('introduce').innerHTML; }, set: function(introduce){ console.log("当执行userInfo.xxoo = abc 的时候，会触发set函数"); document.getElementById('introduce').innerHTML = introduce; } }) </script> </html>