Map 是一種 JavaScript 的鍵值對(duì)集合,也可以稱之為字典或哈希表。在 Vue 中,我們可以通過 Map 類型來還原 Vue 實(shí)例。下面是一個(gè)示例代碼:
const map = new Map(); const vm = {}; const watcher = {}; map.set('data', { msg: 'Hello world', count: 0 }); map.set('watch', { msg: function() { console.log('Message changed'); } }); watcher.get = function(expOrFn, cb) { console.log(`Watching ${expOrFn}`); } Object.defineProperty(vm, '$data', { get: function() { return map.get('data'); } }); Object.defineProperty(vm, '$watch', { get: function() { return watcher.get; } }); console.log(vm.$data.msg); // 輸出:Hello world vm.$watch('msg', function() { console.log('msg changed'); }); vm.$data.msg = 'Hello Map'; // 輸出:Message changed, msg changed
在上面的代碼中,我們通過 Map 實(shí)例來存儲(chǔ) Vue 實(shí)例的數(shù)據(jù)和觀察者對(duì)象。通過 Object.defineProperty() 方法把 $data 和 $watch 屬性添加到 Vue 實(shí)例中,這樣就能通過 vm.$data 和 vm.$watch 訪問到這些屬性。
當(dāng)我們通過 vm.$data.msg 給 msg 屬性賦值時(shí),就會(huì)觸發(fā)觀察者對(duì)象的回調(diào)函數(shù),這樣的話就能做到數(shù)據(jù)和視圖的雙向綁定。
以上就是一個(gè)簡單的通過 Map 實(shí)現(xiàn) Vue 實(shí)例的方法,雖然這并不是 Vue 官方推薦的做法,但是在一些特別的場(chǎng)景下,這種寫法可能會(huì)更加靈活方便。