javascript原生實現雙向數據綁定

時間 2019-11-10

標籤 javascript 原生實現雙向數據綁定欄目 JavaScript 简体版

原文原文鏈接

<body>vue

<h1 id="h1">
</h1>
<input type="text" id="input">
<button id="button">change</button>
<script>
    var data = {
        msg : "我是一個數據"
    }

    **頁面上的初始化**

    h1.innerText = data.msg
    input.value = data.msg

Object.defineProperty(obj, prop, descriptor)

參數說明：api

1. obj:目標對象
      2. prop 需定義或修改的屬性的名字  
      3. descriptor 目標屬性所擁有的特性 
              
     數據劫持 ， 這個api能夠對一個對象的屬性進行精確的控制
     控制這個屬性可以被賦值 可以被重寫 可否被獲取
     控制這個屬性的讀取 或者 寫入

get/set

**get 獲取值  或者叫 讀取**
    **set 設置值  或者叫 賦值**
    
    Object.defineProperty(data,"msg",{
        get(){
             **當我獲取msg的值的時候 我但願獲取到的是什麼結果呢？**
            return input.value
        },
        set(newValue){
              **當我給msg屬性賦值的時候 我但願作一些事情**
              **data.msg ="咳咳"**
              **由於要模擬雙向數據綁定 那麼獲得的新的值 input與h1中的內容也要跟新的值一致**
              **實際上在vue的底層這一步是經過觀察者 / 訂閱者模式實現**
            h1.innerText = newValue;
            input.value = newValue
        }
    })

    button.onclick = function(){
        data.msg += 1
    }

    input.onkeyup = function(){
         **當鍵盤擡起的時候 咱們讓 data.msg 獲取新的值 也就是對data.msg 從新賦值**
        data.msg = input.value
        console.log(data.msg)
    }

</script>

</body>性能