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

最新推荐文章于 2021-10-18 14:29:31 发布

dicha7140

最新推荐文章于 2021-10-18 14:29:31 发布

阅读量210

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CyLee/p/6093790.html

版权

第三方精简版实现

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>

转载于:https://www.cnblogs.com/CyLee/p/6093790.html

dicha7140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 双向数据绑定原理分析以及 Object.defineproperty语法

第三方精简版实现https://github.com/luobotang/simply-vueObject.defineProperty 学习，打开控制台分别输入以下内容调试结果userInfo.fuck = "abc"userInfo.fuckuserInfo.xxoo = "xxoo"userInfo.xxoo...
复制链接

扫一扫