Vue雙向數據綁定簡易理解版

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <div></div>
</body>
<script>
    // 雙向綁定:數據,視圖,當視圖變化,數據變;數據變,視圖變
    const ipt = document.querySelector("input");
    const div = document.querySelector("div");
   //視圖視圖的變化可以輕易通過oninput事件來實現
   /*  ipt.oninput = function () {
        div.innerText = this.value;
    }*/
   
   //但是Vue中是數據與視圖的雙向綁定
   //需要通過 Object.defineProperty()方法實現
    let data = {
        str: "你還好嗎?",
    }
    let str = data.str;
    //當改變data中的str數據時 會發生攔截
    Object.defineProperty(data, "str", {
        get() {
        //獲取data中的str數據時 觸發
            return str
        },
        set(v) {
        //v 是改變之後的值
       // 當改變data中的str數據時 觸發
            str = div.innerText = ipt.value = v
            console.log(111111, this === data)
            //此時的this是攔截的對象
        }
    })
    div.innerText = ipt.value = str;
    ipt.oninput = function () {
        data.str = this.value;
    }
</script>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章