鍍金池/ 問答/Python  HTML/ Vue 中 Observer 的用處是什么？

Vue 中 Observer 的用處是什么？

在看Vue的源碼，產(chǎn)生一個(gè)疑問：

在 state.js 的 initData() 函數(shù)中，使用的是 observe() 方法來為數(shù)據(jù)對(duì)象綁定一個(gè)Observer對(duì)象，Observer對(duì)象執(zhí)行 defineReactive() 方法為數(shù)據(jù)對(duì)象設(shè)置 setter 和 getter。
而在 initProps() 函數(shù)中，通過遍歷 props 選項(xiàng)直接對(duì)數(shù)據(jù)執(zhí)行了 defineReactive() 方法來設(shè)置 setter 和 getter。

那么，同樣是為數(shù)據(jù)設(shè)置 setter 和 getter，為什么 initData() 比 initProps() 多一個(gè) Observer 類，這個(gè) Observer 類的功能到底是什么？

回答
編輯回答
憶當(dāng)年

Observer 類 主要做的事情就是對(duì)傳入的數(shù)據(jù) 進(jìn)行雙向綁定!

通過Object.defineProperty來做數(shù)據(jù)劫持.然后會(huì)實(shí)例化一個(gè)Dep類(利用了發(fā)布/訂閱者模式),從而對(duì)數(shù)據(jù)進(jìn)行雙向綁定!!!

2018年5月16日 19:40
編輯回答
練命

簡(jiǎn)單看了一下，拋個(gè)磚

站在component的角度，props是immutable的，而data是mutable的
所以相對(duì)于props，data需要對(duì)對(duì)象的子對(duì)象以及數(shù)組內(nèi)的元素都設(shè)置setter 和 getter
而props不用

所以O(shè)bserver的功能，應(yīng)該就是對(duì)數(shù)組元素的遍歷執(zhí)行defineReactive()，以及深度遍歷Object為每一個(gè)子對(duì)象都執(zhí)行defineReactive()
對(duì)應(yīng)的就是Observer.observeArray和Observer.walk這兩個(gè)方法

可能還有一些細(xì)節(jié)上的差別，但主要的應(yīng)該就這兩點(diǎn)了

2017年11月15日 04:25