Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

第三方精简版实现

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>
上一篇:16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析


下一篇:双向数据绑定实现之Object.defineProperty