深入淺出Vue.js--變化偵測(cè)

1、Array的變化偵測(cè)是通過(guò)攔截原型上方法實(shí)現(xiàn)的，所以對(duì)直接給數(shù)組某一項(xiàng)賦值，或者通過(guò)設(shè)置length改變數(shù)組，是偵測(cè)不到的。所以可以用api或方法代替。expOrFn： a.b.c or 函數(shù) options： { deep， immediate } 用于觀察一個(gè)表達(dá)式或computed函數(shù)在Vue實(shí)例上的變化。

2、數(shù)組變化偵測(cè)是 Vue3 中的關(guān)鍵概念。有三種方法來(lái)改變數(shù)組：直接修改原數(shù)組、利用 computed 屬性或方法處理數(shù)據(jù)。在計(jì)算屬性中使用 rever（） 和 sort（） 等方法需謹(jǐn)慎，因?yàn)樗鼈儠?huì)直接修改原數(shù)組。正確做法是在調(diào)用這些方法前先創(chuàng)建原數(shù)組的副本，確保數(shù)據(jù)的穩(wěn)定性和組件的性能。

3、Vue.js的每一個(gè)實(shí)例內(nèi)部都有一個(gè)watcher。當(dāng)狀態(tài)發(fā)生改變時(shí)，通知組件進(jìn)行更詳細(xì)的重新渲染。組件的watcher與Vue.js實(shí)例的watcher實(shí)際上指的是同一個(gè)。手動(dòng)調(diào)用實(shí)例watcher的update方法，讓Vue.js實(shí)例重新渲染。重新渲染的機(jī)制基于數(shù)據(jù)變化偵測(cè)，自動(dòng)觸發(fā)實(shí)例中watcher的update方法。

4、Vue 團(tuán)隊(duì)和運(yùn)營(yíng)策略主要由尤雨溪和其他全職成員蔣豪群負(fù)責(zé)，分散在全球各地的志愿者維護(hù) GitHub 倉(cāng)庫(kù)和文檔。社區(qū)通過(guò)論壇、聊天室、線下聚會(huì)等方式運(yùn)營(yíng)，無(wú)需特別策略，因?yàn)?Vue 是由自發(fā)形成的社區(qū)推動(dòng)的。從個(gè)人開(kāi)發(fā)者維護(hù)的開(kāi)源項(xiàng)目到國(guó)際化社區(qū)運(yùn)作，最大的變化是尤雨溪作為項(xiàng)目管理者的角色轉(zhuǎn)變。

5、因此，就需要進(jìn)行比較的比對(duì)，React是通過(guò)虛擬DOM的比對(duì)，Angular是使用臟檢查的流程。Vue.js的變化偵測(cè)和它們都不一樣，它在一定程度上知道具體哪些狀態(tài)發(fā)生了變化，這樣就可以通過(guò)更細(xì)粒度的綁定來(lái)更新視圖。

6、深入分析后發(fā)現(xiàn)，Vue 的數(shù)據(jù)追蹤機(jī)制可能未捕獲到金額修改這一數(shù)據(jù)變動(dòng)。解決這一問(wèn)題的關(guān)鍵在于，確保 Vue 能夠正確檢測(cè)到數(shù)據(jù)的每一次變化。為此，我們應(yīng)將修改數(shù)據(jù)的方法從直接賦值更改為 Vue 的 `$t` 方法。

前端必讀書(shū)籍推薦

狼書(shū)：更了不起的Node.js（卷卷2）：介紹Node.js核心知識(shí)與應(yīng)用場(chǎng)景，適合理解Node.js在企業(yè)中應(yīng)用。 TypeScript深入理解TypeScript：全面講解TypeScript知識(shí)與編譯原理，適合入門(mén)TypeScript開(kāi)發(fā)者。 設(shè)計(jì)模式JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐：全面介紹JavaScript設(shè)計(jì)模式，適合前端開(kāi)發(fā)者閱讀。

《深入淺出 Vue.js》：從源碼層面進(jìn)行解析，適合有一定前端基礎(chǔ)的開(kāi)發(fā)者深入學(xué)習(xí)Vue.js的底層機(jī)制。 《Vue.js項(xiàng)目實(shí)戰(zhàn)》：通過(guò)六個(gè)實(shí)際項(xiàng)目引導(dǎo)，幫助開(kāi)發(fā)者更好地理解和應(yīng)用Vue.js的各種特性。 《Vue2 實(shí)踐揭秘》：以實(shí)例講解Vue 2的入門(mén)技巧和實(shí)戰(zhàn)經(jīng)驗(yàn)，適合快速掌握Vue 2的開(kāi)發(fā)技能。

推薦前端書(shū)籍：《JavaScript高級(jí)程序設(shè)計(jì)（第4版）》本書(shū)全面深入介紹了JavaScript前端開(kāi)發(fā)技術(shù)，涉及基礎(chǔ)至高級(jí)特性，包括JavaScript起源、ECMAScript與DOM標(biāo)準(zhǔn)、類、期約、迭代器、等概念，以及客戶端檢測(cè)、、動(dòng)畫(huà)、表單、錯(cuò)誤處理與ON。

非阻塞式編程和異步I/O的基石。 《深入理解TypeScript》：進(jìn)階必讀，深入探討TypeScript的精髓。 《Angular權(quán)威》：全面理解Angular框架，無(wú)論新手或老手。 《鋒利的jQuery》：jQuery基礎(chǔ)知識(shí)，快速上手。 《HTTP權(quán)威指南》：HTTP協(xié)議詳解，理解Web通信的關(guān)鍵。

進(jìn)階技能提升 《深入解析CSS》：對(duì)于需要深入理解CSS的前端開(kāi)發(fā)者，這本書(shū)是必備之選。 《犀牛書(shū)》和《紅寶書(shū)》：JavaScript的基石，幫助掌握J(rèn)avaScript的核心知識(shí)。 《JavaScript DOM編程藝術(shù)》：適合開(kāi)始JavaScript探索之旅的學(xué)習(xí)者。