Vue關於元件方面的一些總結

2021-10-03 02:57:33 字數 1825 閱讀 1594

新舊虛擬dom經過diff比對,形成乙個補丁(patch(s))區域性更新真實dom

按dom樹的層級分解比較(嚴格的資料結構劃分)

同key值對比(v-for寫key,其他的元素會預設分配key)

注意:

在v-for對乙個陣列迴圈渲染的時候千萬別用索引值當做key值。

因為在是涉及陣列的增刪時候,索引值每一次都是從陣列第一位開始開始累加,也就是在增刪的索引值不是唯一的。

第一是效能的問題:每次key改變,就不只是區域性的更新,而是重新渲染整個列表。第二是bug:比如列表的每一項item是select,那麼當刪除後,select的值會發生改變。

因此我們一般用item的裡面id作為唯一可以值。

同元件對比(如元件props不同)

總結:虛擬dom,使我們可以不直接操作dom元素,只運算元據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的diff演算法。

*子元件可以直接修改屬性?

props傳過來的屬性,在子元件內部可以修改(但父元件的值沒有修改),但是控制台會報錯,會發生不可預期的問題。因此自定義事件專門用於修改,從源頭(父元件)修改。

嚴格來說,vue子元件不能隨便更改父元件傳遞過來的屬性但是可以通過

props配合 $emit 改變父元件傳入的值(兩步實現在子元件直接改)

父元件中props加sync

在父元件傳入值時,需要有***.sync修飾符;表示同步接收。

"warning" />

子元件加update

this.emi

t(′u

pdat

e:wa

rnin

g′;v

al)子

元件可以

在emit('update:warning';val) 子元件可以在

emit(′

upda

te:w

arni

ng′;

val)

子元件可

以在emit("update:***x』,val),派發事件修改傳入的值;再在父元件事件接收

*v-once用在元件上有什麼用?

根元素上新增v-once這個attribute以確保這些內容只計算一次,然後快取起來。元件不會更新

*v-model可以用在元件通訊?

子元件: 

"mytext"

>

在子元件中獲取是:props=['value']; this.$emit('input',data);接收是props中的value,觸發時input,而且子元件的使用中只需要寫v-model。這個value和input是一定要這麼寫

他是乙個語法糖,等價於其實就是子傳父,父傳子的簡寫方式。

了解原理才能更好的學習,一起加油進步!逆戰!

vue元件通訊 vue bus方面的總結

vue bus通常使用在兄弟與兄弟元件之間 然後在元件中,可以使用emit on,off分別來分發,監聽,取消監聽事件 這裡的 off可以取消多次使用 bus監聽的事件 使用用法 1 引入vue import vue from vue 2 在main.js中引入vue bus import bus ...

AIX方面的一些資源

常用aix論壇位址介紹 aix論壇 http loveunix.style images 1 logo4.gif img url 愛u家園 是大家的快樂空間 aix使用者論壇 chinaunix的aix論壇 aix中國論壇 思達奇公司的aix 技術區 itpub的unix論壇 銀信公司 aix練習 ...

一些語言方面的技巧

1.數字轉string int x string id stringstream ss ss id 2.字串轉數字 int num string s stringstream ss s ss num char str sscanf str,d num 將字串轉換成整數 sscanf str,f fl...