vue資料驅動原理是什麼

vue資料驅動原理是：採用資料劫持結合發布者和訂閱者模式，透過「Object.defineProperty()」來劫持各個屬性的setter、getter，在資料變動時發布訊息給訂閱者，觸發相應監聽回調。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue資料驅動原理是什麼

什麼是資料驅動

資料驅動程式是vue.js最大的特點。在vue.js中，所謂的資料驅動就是當資料發生變化的時候，使用者介面發生相應的變化，開發者不需要手動的去修改dom。

比如說我們點擊一個button，需要元素的文字進行是和否的切換。在jquery中，對於頁面的修改我們一般是這樣的一個流程，我們對button綁定事件，然後取得文案對應的元素dom對象，然後根據切換修改該dom對象的文案值。

那麼vuejs是如何實現這種資料驅動的呢？

vue實現資料雙向綁定主要是：採用資料劫持結合發布者-訂閱者模式的方式，透過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發對應監聽回呼。

當把一個普通 Javascript 物件傳給 Vue 實例來當作它的 data 選項時，Vue 則會遍歷它的屬性，並用 Object.defineProperty 將它們轉為 getter/setter。使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被存取和修改時通知變化。

vue的資料雙向綁定 將MVVM作為資料綁定的入口，整合Observer，Compile和Watcher三者，透過Observer來監聽自己的model的資料變化，透過Compile來解析編譯模板指令（vue中是用來解析 {undefined{}}），最後利用watcher搭起observer與Compile之間的通訊橋樑，達到資料變化 —>視圖更新；視圖互動變化（input）—>資料model變更雙向綁定效果。

對getter/setter的理解？

當列印出Vue實例下的data物件裡的屬性，它的每個屬性都有兩個相對應的get和set方法，顧名思義，get為取值，set為賦值，正常情況下，我們取值和賦值是用obj.prop的方式，但是這樣做有一個問題，我如何知道物件的值改變了？所以就輪到set登場了。你可以把get和set理解為function，當我們呼叫物件的屬性時，我們會進入到get.屬性(){…}中，先判斷物件是否有這個屬性，如果沒有，那麽就加上一個name屬性，並且給它賦值；如果有name屬性，那就回傳name屬性。你可以把get看成一個取值的函數，函數的回傳值就是它拿到的值。感覺比較重要的是set屬性，當給實例賦值：此時，會進入set name(val){…}；形參val就是我賦給name屬性的值，在這個函數裡，就可以做很多事了，例如雙向綁定！因為這個值的每次改變都必須經過set，其他方式是改變不了它的，相當於萬能的監聽器。 ES5的物件原型有兩個新的屬性__defineGetter__和__defineSetter__，專門用來給物件綁定get和set。建議使用下面這種方式，因為是在原型上書寫，所以可以繼承和重用。

【相關推薦：《vue.js教學》】

以上是vue資料驅動原理是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！