這篇“Vue的雙向數(shù)據(jù)綁定怎么實現(xiàn)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue的雙向數(shù)據(jù)綁定怎么實現(xiàn)”文章吧。

在華寧等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都做網(wǎng)站 網(wǎng)站設(shè)計制作按需網(wǎng)站開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站制作,華寧網(wǎng)站建設(shè)費用合理。

vue的雙向綁定原理及實現(xiàn)

一個極簡雙向數(shù)據(jù)綁定的示例：

  var obj = {};
        Object.defineProperty(obj,'hello',{
            set:function(newVal){
                document.getElementById('a').value = newVal;
                document.getElementById('b').innerHTML = newVal;
            }
        });
        document.addEventListener('keyup',function(e){
            obj.hello = e.target.value;
        })

此例實現(xiàn)的效果是：隨文本框輸入文字的變化，span 中會同步顯示相同的文字內(nèi)容；在js或控制臺顯式的修改 obj.hello 的值，視圖會相應(yīng)更新。這樣就實現(xiàn)了 model => view 以及 view => model 的雙向綁定。這就是雙向綁定的基本原理，下面是具體探究：
先看一下成果圖：

下面是代碼圖：

vue數(shù)據(jù)雙向綁定原理

vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的，那么vue是如果進行數(shù)據(jù)劫持的，我們可以先來看一下通過控制臺輸出一個定義在vue初始化數(shù)據(jù)上的對象是個什么東西。

代碼：

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }});

結(jié)果為：

我們可以看到屬性a有兩個相對應(yīng)的get和set方法，為什么會多出這兩個方法呢？因為vue是通過Object.defineProperty()來實現(xiàn)數(shù)據(jù)劫持的。

Object.defineProperty( )是用來做什么的？它可以來控制一個對象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來研究下它對應(yīng)的兩個描述屬性get和set，如果還不熟悉其用法，請點擊這里閱讀更多用法。

在平常，我們很容易就可以打印出一個對象的屬性數(shù)據(jù)：

var Book = {
  name: 'vue權(quán)威指南'};console.log(Book.name);  // vue權(quán)威指南

如果想要在執(zhí)行console.log(book.name)的同時，直接給書名加個書名號，那要怎么處理呢？或者說要通過什么監(jiān)聽對象 Book 的屬性值。這時候Object.defineProperty( )就派上用場了，代碼如下：

var Book = {}var name = '';Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一個書名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }})Book.name = 'vue權(quán)威指南';  // 你取了一個書名叫做vue權(quán)威指南console.log(Book.name);  // 《vue權(quán)威指南》

我們通過Object.defineProperty( )設(shè)置了對象Book的name屬性，對其get和set進行重寫操作，顧名思義，get就是在讀取name屬性這個值觸發(fā)的函數(shù)，set就是在設(shè)置name屬性這個值觸發(fā)的函數(shù)，所以當(dāng)執(zhí)行 Book.name = ‘vue權(quán)威指南’ 這個語句時，控制臺會打印出 “你取了一個書名叫做vue權(quán)威指南”，緊接著，當(dāng)讀取這個屬性時，就會輸出 “《vue權(quán)威指南》”，因為我們在get函數(shù)里面對該值做了加工了。如果這個時候我們執(zhí)行下下面的語句，控制臺會輸出什么？

console.log(Book);

結(jié)果為：

這樣說明vue確實是通過這種方法來進行數(shù)據(jù)劫持的。接下來我們通過其原理來實現(xiàn)一個簡單版的mvvm雙向綁定代碼。

簡單版的mvvm雙向綁定

思路分析

實現(xiàn)mvvm主要包含兩個方面，數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)：

關(guān)鍵點在于data如何更新view，因為view更新data其實可以通過事件監(jiān)聽即可，比如input標(biāo)簽監(jiān)聽 ‘input’ 事件就可以實現(xiàn)了。所以我們著重來分析下，當(dāng)數(shù)據(jù)改變，如何更新視圖的。

數(shù)據(jù)更新視圖的重點是如何知道數(shù)據(jù)變了，只要知道數(shù)據(jù)變了，那么接下去的事都好處理。如何知道數(shù)據(jù)變了，其實上文我們已經(jīng)給出答案了，就是通過Object.defineProperty( )對屬性設(shè)置一個set函數(shù)，當(dāng)數(shù)據(jù)改變了就會來觸發(fā)這個函數(shù)，所以我們只要將一些需要更新的方法放在這里面就可以實現(xiàn)data更新view了。

實現(xiàn)過程

我們已經(jīng)知道實現(xiàn)數(shù)據(jù)的雙向綁定，首先要對數(shù)據(jù)進行劫持監(jiān)聽，所以我們需要設(shè)置一個監(jiān)聽器Observer，用來監(jiān)聽所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進行統(tǒng)一管理的。接著，我們還需要有一個指令解析器Compile，對每個節(jié)點元素進行掃描和解析，將相關(guān)指令對應(yīng)初始化成一個訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化，就會執(zhí)行對應(yīng)的更新函數(shù)，從而更新視圖。因此接下去我們執(zhí)行以下3個步驟，實現(xiàn)數(shù)據(jù)的雙向綁定：

1.實現(xiàn)一個監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動的，就通知訂閱者。

2.實現(xiàn)一個訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。

3.實現(xiàn)一個解析器Compile，可以掃描和解析每個節(jié)點的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器。

流程圖如下：

1.實現(xiàn)一個Observer

Observer是一個數(shù)據(jù)監(jiān)聽器，其實現(xiàn)核心方法就是前文所說的Object.defineProperty( )。如果要對所有屬性都進行監(jiān)聽的話，那么可以通過遞歸方法遍歷所有屬性值，并對其進行Object.defineProperty( )處理。如下代碼，實現(xiàn)了一個Observer。

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + newVal.toString() + '”');
        }
    });}function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });};var library = {
    book1: {
        name: ''
    },
    book2: ''};observe(library);library.book1.name = 'vue權(quán)威指南'; // 屬性name已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“vue權(quán)威指南”library.book2 = '沒有此書籍'; 
 // 屬性book2已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“沒有此書籍”

思路分析中，需要創(chuàng)建一個可以容納訂閱者的消息訂閱器Dep，訂閱器Dep主要負(fù)責(zé)收集訂閱者，然后再屬性變化的時候執(zhí)行對應(yīng)訂閱者的更新函數(shù)。所以顯然訂閱器需要有一個容器，這個容器就是list，將上面的Observer稍微改造下，植入消息訂閱器：

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (是否需要添加訂閱者) {
                dep.addSub(watcher); // 在這里添加一個訂閱者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + newVal.toString() + '”');
            dep.notify(); 
            // 如果數(shù)據(jù)變化，通知所有訂閱者
        }
    });}function Dep () {
    this.subs = [];}Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }};

從代碼上看，我們將訂閱器Dep添加一個訂閱者設(shè)計在getter里面，這是為了讓W(xué)atcher初始化進行觸發(fā)，因此需要判斷是否要添加訂閱者，至于具體設(shè)計方案，下文會詳細(xì)說明的。在setter函數(shù)里面，如果數(shù)據(jù)變化，就會去通知所有訂閱者，訂閱者們就會去執(zhí)行對應(yīng)的更新的函數(shù)。到此為止，一個比較完整Observer已經(jīng)實現(xiàn)了，接下來我們開始設(shè)計Watcher。

2.實現(xiàn)Watcher

訂閱者Watcher在初始化的時候需要將自己添加進訂閱器Dep中，那該如何添加呢？我們已經(jīng)知道監(jiān)聽器Observer是在get函數(shù)執(zhí)行了添加訂閱者Wather的操作的，所以我們只要在訂閱者Watcher初始化的時候出發(fā)對應(yīng)的get函數(shù)去執(zhí)行添加訂閱者操作即可，那要如何觸發(fā)get的函數(shù)，再簡單不過了，只要獲取對應(yīng)的屬性值就可以觸發(fā)了，核心原因就是因為我們使用了Object.defineProperty( )進行數(shù)據(jù)監(jiān)聽。這里還有一個細(xì)節(jié)點需要處理，我們只要在訂閱者Watcher初始化的時候才需要添加訂閱者，所以需要做一個判斷操作，因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了。訂閱者Watcher的實現(xiàn)如下：

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 將自己添加到訂閱器的操作}Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() {
        Dep.target = this;  // 緩存自己
        var value = this.vm.data[this.exp]
         // 強制執(zhí)行監(jiān)聽器里的get函數(shù)
        Dep.target = null;  // 釋放自己
        return value;
    }};

這時候，我們需要對監(jiān)聽器Observer也做個稍微調(diào)整，主要是對應(yīng)Watcher類原型上的get函數(shù)。需要調(diào)整地方在于defineReactive函數(shù)：

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (Dep.target) {.  
            // 判斷是否需要添加訂閱者
                dep.addSub(Dep.target); 
                // 在這里添加一個訂閱者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“' + newVal.toString() + '”');
            dep.notify(); 
            // 如果數(shù)據(jù)變化，通知所有訂閱者
        }
    });}Dep.target = null;

到此為止，簡單版的Watcher設(shè)計完畢，這時候我們只要將Observer和Watcher關(guān)聯(lián)起來，就可以實現(xiàn)一個簡單的雙向綁定數(shù)據(jù)了。因為這里沒有還沒有設(shè)計解析器Compile，所以對于模板數(shù)據(jù)我們都進行寫死處理，假設(shè)模板上又一個節(jié)點，且id號為’name’，并且雙向綁定的綁定的變量也為’name’，且是通過兩個大雙括號包起來（這里只是為了掩飾，暫時沒什么用處），模板如下：

    {{name}}

這時候我們需要將Observer和Watcher關(guān)聯(lián)起來：

function SelfVue (data, el, exp) {
    this.data = data;
    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板數(shù)據(jù)的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;}

然后在頁面上new以下SelfVue類，就可以實現(xiàn)數(shù)據(jù)的雙向綁定了：

    {{name}}
    var ele = document.querySelector('#name');
    var selfVue = new SelfVue({
        name: 'hello world'
    }, ele, 'name');

    window.setTimeout(function () {
        console.log('name值改變了');
        selfVue.data.name = 'canfoo';
    }, 2000);

這時候打開頁面，可以看到頁面剛開始顯示了是’hello world’，過了2s后就變成’canfoo’了。到這里，總算大功告成一半了，但是還有一個細(xì)節(jié)問題，我們在賦值的時候是這樣的形式 ’ selfVue.data.name = ‘canfoo’ ’ 而我們理想的形式是’ selfVue.name = ‘canfoo’ ’為了實現(xiàn)這樣的形式，我們需要在new SelfVue的時候做一個代理處理，讓訪問selfVue的屬性代理為訪問selfVue.data的屬性，實現(xiàn)原理還是使用Object.defineProperty( )對屬性值再包一層：

function SelfVue (data, el, exp) {
    var self = this;
    this.data = data;

    Object.keys(data).forEach(function(key) {
        self.proxyKeys(key);  // 綁定代理屬性
    });

    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板數(shù)據(jù)的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;}SelfVue.prototype = {
    proxyKeys: function (key) {
        var self = this;
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key];
            },
            set: function proxySetter(newVal) {
                self.data[key] = newVal;
            }
        });
    }}

這下我們就可以直接通過’ selfVue.name = ‘canfoo’ ’的形式來進行改變模板數(shù)據(jù)了。

3.實現(xiàn)Compile

雖然上面已經(jīng)實現(xiàn)了一個雙向數(shù)據(jù)綁定的例子，但是整個過程都沒有去解析dom節(jié)點，而是直接固定某個節(jié)點進行替換數(shù)據(jù)的，所以接下來需要實現(xiàn)一個解析器Compile來做解析和綁定工作。解析器Compile實現(xiàn)步驟：

1.解析模板指令，并替換模板數(shù)據(jù)，初始化視圖

2.將模板指令對應(yīng)的節(jié)點綁定對應(yīng)的更新函數(shù)，初始化相應(yīng)的訂閱器

為了解析模板，首先需要獲取到dom元素，然后對含有dom元素上含有指令的節(jié)點進行處理，因此這個環(huán)節(jié)需要對dom操作比較頻繁，所有可以先建一個fragment片段，將需要解析的dom節(jié)點存入fragment片段里再進行處理：

function nodeToFragment (el) {
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while (child) {
        // 將Dom元素移入fragment中
        fragment.appendChild(child);
        child = el.firstChild    }
    return fragment;}

接下來需要遍歷各個節(jié)點，對含有相關(guān)指定的節(jié)點進行特殊處理，這里咱們先處理最簡單的情況，只對帶有 ‘{undefined{變量}}’ 這種形式的指令進行處理，先簡道難嘛，后面再考慮更多指令情況：

function compileElement (el) {
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
        var reg = /\{\{(.*)\}\}/;
        var text = node.textContent;

        if (self.isTextNode(node) && reg.test(text)) {  // 判斷是否是符合這種形式{{}}的指令
            self.compileText(node, reg.exec(text)[1]);
        }

        if (node.childNodes && node.childNodes.length) {
            self.compileElement(node);  // 繼續(xù)遞歸遍歷子節(jié)點
        }
    });},function compileText (node, exp) {
    var self = this;
    var initText = this.vm[exp];
    this.updateText(node, initText);  // 將初始化的數(shù)據(jù)初始化到視圖中
    new Watcher(this.vm, exp, function (value) {  // 生成訂閱器并綁定更新函數(shù)
        self.updateText(node, value);
    });},function (node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value;}

獲取到最外層節(jié)點后，調(diào)用compileElement函數(shù)，對所有子節(jié)點進行判斷，如果節(jié)點是文本節(jié)點且匹配{undefined{}}這種形式指令的節(jié)點就開始進行編譯處理，編譯處理首先需要初始化視圖數(shù)據(jù)，對應(yīng)上面所說的步驟1，接下去需要生成一個并綁定更新函數(shù)的訂閱器，對應(yīng)上面所說的步驟2。這樣就完成指令的解析、初始化、編譯三個過程，一個解析器Compile也就可以正常的工作了。為了將解析器Compile與監(jiān)聽器Observer和訂閱者Watcher關(guān)聯(lián)起來，我們需要再修改一下類SelfVue函數(shù)：

function SelfVue (options) {
    var self = this;
    this.vm = this;
    this.data = options;

    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);
    });

    observe(this.data);
    new Compile(options, this.vm);
    return this;}

更改后，我們就不要像之前通過傳入固定的元素值進行雙向綁定了，可以隨便命名各種變量進行雙向綁定了：

    
        
{{title}}
        
{{name}}
    


    var selfVue = new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: ''
        }
    });

    window.setTimeout(function () {
        selfVue.title = '你好';
    }, 2000);

    window.setTimeout(function () {
        selfVue.name = 'canfoo';
    }, 2500);

如上代碼，在頁面上可觀察到，剛開始titile和name分別被初始化為 ‘hello world’ 和空，2s后title被替換成 ‘你好’ 3s后name被替換成 ‘canfoo’ 了。廢話不多說，再給你們來一個這個版本的代碼（v2）。

到這里，一個數(shù)據(jù)雙向綁定功能已經(jīng)基本完成了，接下去就是需要完善更多指令的解析編譯，在哪里進行更多指令的處理呢？答案很明顯，只要在上文說的compileElement函數(shù)加上對其他指令節(jié)點進行判斷，然后遍歷其所有屬性，看是否有匹配的指令的屬性，如果有的話，就對其進行解析編譯。這里我們再添加一個v-model指令和事件指令的解析編譯，對于這些節(jié)點我們使用函數(shù)compile進行解析處理：

function compile (node) {
    var nodeAttrs = node.attributes;
    var self = this;
    Array.prototype.forEach.call(nodeAttrs, function(attr) {
        var attrName = attr.name;
        if (self.isDirective(attrName)) {
            var exp = attr.value;
            var dir = attrName.substring(2);
            if (self.isEventDirective(dir)) {  // 事件指令
                self.compileEvent(node, self.vm, exp, dir);
            } else {  // v-model 指令
                self.compileModel(node, self.vm, exp, dir);
            }
            node.removeAttribute(attrName);
        }
    });}

上面的compile函數(shù)是掛載Compile原型上的，它首先遍歷所有節(jié)點屬性，然后再判斷屬性是否是指令屬性，如果是的話再區(qū)分是哪種指令，再進行相應(yīng)的處理，處理方法相對來說比較簡單，這里就不再列出來。

最后我們在稍微改造下類SelfVue，使它更像vue的用法：

function SelfVue (options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;

    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);
    });

    observe(this.data);
    new Compile(options.el, this);
    options.mounted.call(this); 
    // 所有事情處理好后執(zhí)行mounted函數(shù)}

這時候我們可以來真正測試了，在頁面上設(shè)置如下東西：

    
        
{{title}}
        
        
{{name}}
        click me!
    


     new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: 'canfoo'
        },
        methods: {
            clickMe: function () {
                this.title = 'hello world';
            }
        },
        mounted: function () {
            window.setTimeout(() => {
                this.title = '你好';
            }, 1000);
        }
    });

代碼我已經(jīng)上傳到github上面去了，想要的請直接下載就可以了

效果：
總結(jié)：v2是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)來渲染視圖,實現(xiàn)數(shù)據(jù)和視圖同步。
v3 使用發(fā)布者訂閱模式，結(jié)合ES6的prosy的set和get方法來進行數(shù)據(jù)劫持，進一步結(jié)合watchr的update方法

理論：

vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)來渲染視圖。

具體步驟：

第一步： 需要observer(觀察者)對數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步： compile(模板解析器)解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步： Watcher(訂閱者)是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步： MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。
名詞解釋：

什么是setter、getter

答：首先，別誤以為他們就是一會要說的get、set

對象有兩種屬性：

1. 數(shù)據(jù)屬性: 就是我們經(jīng)常使用的屬性

2. 訪問器屬性: 也稱存取器屬性（存取器屬性就是一組獲取和設(shè)置值的函數(shù)）

再看一行代碼：

const obj = {a:1,b:2}console.log(obj)

log打印出來的結(jié)果如下：

數(shù)據(jù)屬性就是a和b；

get和set就是關(guān)鍵字 它們后面各自對應(yīng)一個函數(shù)，這個函數(shù)就是上面紅字部分所講的，存儲器屬性。

get對應(yīng)的方法稱為getter，負(fù)責(zé)獲取值，它不帶任何參數(shù)。set對應(yīng)的方法為setter，負(fù)責(zé)設(shè)置值，在它的函數(shù)體中，一切的return都是無效的。

2. 什么是Object.defineProperty() ？

答：我們先看一句定義：

對象是由多個名/值對組成的無序的集合。對象中每個屬性對應(yīng)任意類型的值。

定義對象可以使用構(gòu)造函數(shù)或字面量的形式：

let obj = new Object;  //obj = {}obj.name = "張學(xué)友";  //添加描述obj.say = function(){};  //添加行為

除了以上添加屬性的方式，當(dāng)然還可以使用Object.defineProperty定義新屬性或修改原有的屬性；
語法：

Object.defineProperty(obj, prop, descriptor)

參數(shù)：

obj： 必需。目標(biāo)對象；
prop： 必需。需定義或修改的屬性的名字；
descriptor： 必需。目標(biāo)屬性所擁有的特性；

返回值：

傳入函數(shù)的對象，即第一個參數(shù)obj。

undefined

以上就是關(guān)于“Vue的雙向數(shù)據(jù)綁定怎么實現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。