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>

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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