Vue實現響應式動態數據綁定

一、Vue的響應式數據原理

Vue.js是一款構建用戶界面的漸進式框架，Vue.js採用MVVM模式（Model-View-ViewModel），核心是實現了數據雙向綁定。

Vue中是如何實現數據綁定的呢？當Vue實例中的數據發生改變時，Vue會自動觸發某些操作來更新頁面上的數據，這其中的核心原理是Vue利用了ES6中的Object.defineProperty()方法來實現數據觀測（數據代理），從而實現了雙向數據綁定。

在Vue中，每個Vue實例都會對應一個單獨的Watcher實例，用於監聽數據的變化；而每個Watcher實例都會對應一個單獨的Dep實例，用於存儲Watcher實例，同時當數據發生改變時會通知所有存儲在Dep實例中的Watcher實例。以下是Vue的響應式數據原理的示意圖：

    
    // 示例代碼
    var data = {price: 100, quantity: 2}
    
    function defineReactive(obj, key, val) {
        var dep = new Dep()
        Object.defineProperty(obj, 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
                dep.notify()
            }
        })
    }
    
    function observe(data) {
        if (!data || typeof data !== 'object') {
            return
        }
        Object.keys(data).forEach((key) => {
            defineReactive(data, key, data[key])
        })
    }
    
    class Dep {
        constructor() {
            this.subs = []
        }
        addSub(sub) {
            this.subs.push(sub)
        }
        notify() {
            this.subs.forEach((sub) => {
                sub.update()
            })
        }
    }
    
    class Watcher {
        constructor(vm, exp, cb) {
            this.vm = vm
            this.exp = exp
            this.cb = cb
    
            Dep.target = this
            this.value = this.get()
            Dep.target = null
        }
        get() {
            var value = this.vm
            this.exp.split('.').forEach((key) => {
                value = value[key]
            })
            return value
        }
        update() {
            this.cb.call(this.vm, this.get())
        }
    }
    
    var vm = observe(data)
    
    new Watcher(vm, 'price', function() {
        console.log('price變化了')
    })
    
    data.price = 200 // price變化了
    

二、Vue的動態數據綁定

動態綁定是Vue中的重要功能之一，通過它，我們可以在頁面上動態地改變數據，而不需要刷新整個頁面。在Vue中使用動態數據綁定非常簡單，只需要在數據引用的位置加上雙花括號{{}}就可以了。

// 示例代碼

{{message}}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/304880.html