vue雙向綁定的原理是什麼？ vue雙向綁定的原理實現

本篇文章帶給大家的內容是關於vue雙向綁定的原理是什麼？ vue雙向綁定的原理實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

先上效果圖

#簡單的實作資料的雙向綁定
首先來了解一個東西：Object.defineProperty()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

這裡是MDN對這個的詳細說明
簡單點說：

這個方法可以修改現有物件屬性的值
Object.defineProperty (obj, prop, descriptor)
參數說明：
   obj：定義屬性的物件
   prop：修改後的屬性
   descriptor:修改的屬性描述子

這邊只挑最簡單的說，

get:

官方：一個給予屬性getter 的方法，如果沒有getter 則為undefined。當存取該屬性時，該方法會被執行，方法執行時沒有參數傳入，但會傳入this物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。預設為 undefined。

**簡單的說：當你需要取物件的屬性值時，就是來呼叫這個函數，取到值的**

set：

官方：一個給予屬性setter 的方法，如果沒有setter 則為undefined。當屬性值修改時，觸發執行該方法。此方法將接受唯一參數，即該屬性新的參數值。預設為 undefined。

**簡單的說：當你需要設定（改變）物件的屬性值時，就是來呼叫這個函數，達到修改的**

接下來上程式碼

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
    
    
        <div></div>
        <div>
            <input>
        </div>
        <script>
            var data = {};
            var dom_aa = document.getElementById("aa")
            
            function changedata(value){
                data.a = value
            }

            //直接使用Object.defineProperty里面的set方法进行视图改变
            Object.defineProperty(data,"a",{
                set:function(newValue){
                    dom_aa.innerHTML = newValue;
                },
                get:function(){
                    return a;
                }
            })
        </script>
    

相關推薦：

Angular和Vue雙向資料綁定的實作原理(重點是vue的雙向綁定)

vue雙向資料綁定原理探究

以上是vue雙向綁定的原理是什麼？ vue雙向綁定的原理實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！