The key special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vgorue uses an of nodes again of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.
但是官網下面也說:
It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
Properly trigger lifecycle hooks of a you want to: Properly trigger lifecycle hooks of a componento
確實是虛擬DOM的最佳化過程。如果你想上面的icon每次都被create,就給每個加上不一樣的key屬性。
這個現像很有意思,從來沒有留意過,具體原因還在研究之中。
從現像上推測,可能是vue2.x版本中引入了虛擬DOM,而帶來的一些最佳化過程導致了(因為1.x版本沒有這個現象)。
貌似框架在動態建立icon實例的過程中,進行了判斷,使用最少的實例去做渲染。例如當index值改變時,從1變到2,vue知道目前有一個icon實例, 且之後只會顯示一個icon實例,因此重用了現有的這個實例,同理整個過程,所以就只有一次create發生。如果將上面的4個v-if條件修改成,某個時刻會有2個條件滿足(即同時顯示兩個icon),那麼created就會發生兩次。
更新:
官網上找到了證據,關於key的使用,一般是在列表渲染中:
但是官網下面也說:不是很明白你問的什麼問題,你可以去看看vue的vue生命週期鉤子