vue雙向綁定用什麼代碼?Vue是個前端框架，所以這邊文章是寫給對前端有興趣的夥伴，今天小編就來說說關于vue雙向綁定用什麼代碼?下面更多詳細答案一起來看看吧!

vue雙向綁定用什麼代碼

Vue是個前端框架，所以這邊文章是寫給對前端有興趣的夥伴。

社會的進步是由需求推動的，任何新生事物的出現，都是因為有人有需要。

為了弄清楚這個需求，先了解兩個知識點：浏覽器的職責以及前端工作的曆史演進。

浏覽器的職責

當你想提供一個網站服務的時候，你所做的實際上隻是兩件事：一是搞台服務器，使你的程序跑起來；二是使服務器能公網訪問。

可是你的網站不會自己跑到用戶眼前，還得需要用戶打開他的浏覽器，輸入網址，點擊GO，這個時候你的網頁才呈現給用戶。整個過程，涉及兩個參與主體：服務器和浏覽器。服務器往浏覽器傳輸的用戶感興趣的文本信息包含的就是網頁三套件：html、css以及js腳本。

因此，所有浏覽器都得包括三部分：html解析器，渲染器，腳本引擎。Html解析器負責生成DOM樹，一種浏覽器自己維護自己用的數據結構，用戶看不見；渲染器負責呈現文字、圖表、視頻給用戶；腳本引擎負責與用戶互動。

如果對前端工作進行總結的話，主要就是兩點：修改頁面元素、維護當前頁面狀态。如果将當前JS所有變量的一個快照理解成就是一個狀态，維護狀态，靠的是JS；而修改頁面元素，最終還得靠操作DOM。

前端工作的演進曆史

在jQuery出現以前，我們直接操作DOM結構，這種方法複雜度高，而且需要考慮不同浏覽器的兼容性；有了jQuery強大的選擇器以及高度封裝的API，我們可以更方便的操作DOM，jQuery幫我們處理兼容性問題，同時也使DOM操作變得簡單；

jQuery雖然很大程度上解放了前端生産力，但時間一長，人總是喜新厭舊的，而且黑天鵝也經常發生。Gmail的誕生，對前端的影響猶如阿裡當年推出餘額寶時對互聯網金融的影響一樣，都是一個引爆點。用過Gmail郵箱的人都知道，這就是一個單頁面應用，整個使用過程中，根本沒有頁面的跳轉，尤為可貴之處在于整個頁面的修改完全不需要直接操作DOM，而是基于一種新的MVVM模式，理所當然，Gmail團隊提供了MVVM模式的一種實現，就是框架AngularJS。

MVVM模式，本質上就是使用數據雙向綁定，使得頁面修改完全不需要直接操作DOM。更新了狀态即JS變量，頁面元素會自動更新；反之，更新了頁面元素，數據狀态也會自動更新。野心不小的AngularJS卻并不滿足于此，它融合了各種模式：MVVM、MVC，結果就是AngularJS大而全。這個社會就是奇怪，喜歡大而全的人很多，喜歡小清新的也大有人在，Vue就是這個小清新，專注于MVVM。

Vue的核心隻關注視圖層，它的定位就是一個漸進式的前端框架，而且是實現了MVVM模式的前端框架。漸進式指的就是頁面視圖變化時隻修改需要變化的DOM元素，而不是大範圍修改DOM，因為這樣性能更高。

Vue.js的目标是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件，也就是雙向綁定和組件式開發。

雙向綁定指的是頁面元素和JS變量兩者之間的綁定，頁面元素變化時告知JS變量，反之，JS變量變化時告知頁面元素。顯然，為了實現雙向綁定，我們得分别能監聽到頁面元素的變化和JS變量的值的變化。對于前者，基于HTML原生支持的各種事件模型，可以很方便的監聽到，那麼如何監聽某一個JS變量的值的變化呢？

ECMAScript5.1開始提供了 一個API：Object.defineProperty。 這個API，能夠為JS對象的屬性設計一個特殊的 getter/setter，然後在 setter 裡觸發一個函數，就可以達到監聽的效果。下面的代碼片段是個例子，僅供參考。

function Archiver() {

var temperature = null;

Object.defineProperty(this, 'temperature', {

get: function() {

console.log('get!');

return temperature;

},

set: function(value) {

temperature = value;

console.log(value);

}

});

}

var arc = new Archiver();

arc.temperature; // 控制台打印出'get!'

arc.temperature = 11; // 控制台打印出11

arc.temperature = 13; // 控制台打印出13

到此，也應該基本明白如何監聽頁面元素以及JS變量的變化了。接下來扒一扒Vue.js基于此又做了哪些更深層次的特性。

Vue.js 和諸多 MVVM 的思路是類似的，主要做了三件事：

其一，對JS data進行了監聽，并且提供訂閱某個數據項的變化的能力，這個監聽者俗稱Observer；

其二，解析html，分析html裡包含的所有Vue.js指令即directive，得到每一個directive所依賴的數據項及其相應的視圖更新方法。比如 v-text="message" 被解析之後，所依賴的數據項 this.$data.message，以及相應的視圖更新方法 node.text= this.$data.message，這個解析器俗稱directive parser；

其三，集成directive的數據依賴及對應數據的observer，即将之前解析出的數據項對應的視圖更新方法與數據項的變化監聽綁定在一起，這樣當數據變化的時候，就會觸發observer，進而觸發相關依賴對應的視圖更新方法，最後達到更新視圖的目的，這個集成器俗稱Watcher。

所以整個Vue.js的核心，就是如何實現observer, directive parser, watcher這三樣東西。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部