vue數據驅動原理的示例分析

這篇文章給大家分享的是有關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數據驅動原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！