這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中利用Object.defineProperty實(shí)現(xiàn)雙向綁定，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、新華網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為新華等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
什么是雙向綁定？
1.當(dāng)一個對象（或變量）的屬性改變，那么調(diào)用這個屬性的地方顯示也應(yīng)該改變，模型到視圖（model => view）
2.當(dāng)調(diào)用屬性的這個地方改變了這個屬性（通常是一個表單元素），那么這個對象（或變量）的屬性也會改為最新的值 ，即視圖到模型（view => model）
我們怎么知道對象的屬性變了？
上文說到，Object.defineProperty 設(shè)置對象屬性的描述字段里面有兩個屬性 set （設(shè)置屬性時被調(diào)用）和get（獲取屬性時被調(diào)用），只說不練，你再講什么？眼見為實(shí)好嗎？OK ，上代碼
重慶分公司
重慶分公司
var user = {};
var defaultName = "狂奔的蝸牛";
Object.defineProperty(user,"name",{
get:function(){
console.log("你是不是來獲取值啦");
return defaultName;
},
set:function(value){
console.log("你是不是來設(shè)置值啦");
defaultName = value;
}
})
console.log(user.name);
user.name = "狂奔的蘿卜";
console.log(user.name);
get和set存取時被調(diào)用
如上圖所示 每當(dāng)我獲取user.name屬性時，get方法被調(diào)用，get 方法對應(yīng)的函數(shù)被執(zhí)行，輸出 你是不是來獲取值啦；每當(dāng)我設(shè)置user.name屬性時，set方法對應(yīng)的函數(shù)被執(zhí)行，輸出 你是不是來設(shè)置值啦 ； 是的，我們監(jiān)控到了代碼對user.name屬性的存取。
說明 假設(shè)id="model" 的元素的 value 是user.name的值，既然我們可以在改變屬性的執(zhí)行日志輸出（console.log("你是不是來設(shè)置值啦");），那么，我們在設(shè)置值的時候給id="model" 的元素設(shè)置下新值，不就實(shí)現(xiàn)了從模型到視圖？！！，說干就干
模型到視圖（model => view）的同步
說明 假設(shè)id="model" 的元素的 value 是user.name的值，既然我們可以在改變屬性的執(zhí)行日志輸出（console.log("你是不是來設(shè)置值啦");），那么，我們在設(shè)置值的時候給id="model" 的元素設(shè)置下新值，不就實(shí)現(xiàn)了從模型到視圖？??！，說干就干
