Vue 雙向數據綁定原理分析以及 Object.defineproperty語法

時間 2019-11-21

標籤 vue 雙向數據綁定原理分析以及 object.defineproperty object defineproperty 語法简体版

原文原文鏈接

第三方精簡版實現javascript

https://github.com/luobotang/simply-vue

Object.defineProperty 學習，打開控制檯分別輸入如下內容調試結果

userInfo.fuck = "abc"html
userInfo.fuckvue
userInfo.xxoo = "xxoo"java
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>