Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
2016-11-23 15:19
1166 查看
第三方精简版实现
userInfo.fuck = "abc"
userInfo.fuck
userInfo.xxoo = "xxoo"
userInfo.xxoo
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>
相关文章推荐
- Object.defineProperty()/ vue数据绑定原理
- vue 数据绑定实现的核心 Object.defineProperty()
- Vue 双向数据绑定原理分析
- JS中的双向数据绑定及Object.defineProperty方法
- vue开发:vue,angular,react数据双向绑定原理分析
- Vue实现双向绑定的原理以及响应式数据的方法
- 从Object.definedProperty中看vue的双向数据的绑定
- Vue源码解读——实现一个双向绑定(Object.defineProperty与observe)
- Vue实现双向绑定的原理以及响应式数据
- 双向数据绑定实现之Object.defineProperty
- Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式
- Vue实现双向绑定的原理以及响应式数据
- Vue 双向数据绑定原理分析
- Vue双向数据绑定原理分析
- JS中的双向数据绑定及Object.defineProperty方法
- Vue双向绑定的关键:Object.defineProperty()
- VUE双向数据绑定原理分析
- 应用defineProperty简单实现vue的双向数据绑定
- 浅谈vue,angular,react数据双向绑定原理分析
- Vue.js双向绑定内核—Object.defineProperty解析