Vue3 特殊屬性：key,ref,is

參考文件：https://v3.vuejs.org/api/special-attributes.html

vue3 特殊屬性：

• key
• ref
• is

key

期望值：number | string

特殊屬性key主要用於提示Vue的虛擬DOM演算法在區分新節點列表和舊節點列表時識別VNodes。沒有key的時候，Vue使用一種演算法來最小化元素移動，並儘可能就地修補/重用相同型別的元素。使用key，它將根據鍵的順序變化對元素重新排序，而key不再存在的元素將總是被刪除/銷燬。

同一公共父元素的子元素必須具有唯一的key，重複的key會導致渲染錯誤。

最常用的使用示例是和v-for一起使用。

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

它還可以用於強制替換元素/元件，而不是重用它。當你想要的時候，這很有用：

• 恰當地觸發元件的生命週期鉤子
• 觸發transitions

示例：

<transition>
    <span :key="text">{{ text }}</span>
</transition>

當text改變，span將始終被替換，而不是修補，因此將觸發transition

ref

期望值：string | Function

ref用於註冊對元素或子元素的引用。引用將註冊在父元件的$refs物件下。如果在普通DOM元素上使用，引用將是該元素，如果在子元件上使用，引用將是元件例項

<!-- vm.$refs.p 就是這個DOM節點 -->
<p ref="p">hello</p>

<!-- vm.$refs.child 就是child-component這個元件例項 -->
<child-component ref="child"></child-component>

<!-- 當動態繫結，我們可以將ref定義為一個回撥函式，顯示地傳遞元素或元件例項 
 
-->
<child-component :ref="(el) => child = el"></child-component>

關於ref註冊時間的一個重要提示：

因為ref本身是由render函式建立的，所以你不能在初始渲染時訪問它們——它們還不存在！

$refs也是非響應式的，因此不應該嘗試在資料繫結模板中使用它。

refs相關補充：

Template refs

儘管存在props和events，但有時您可能仍然需要在JavaScript中直接訪問子元件，要實現這一點，可以使用ref屬性作為子元件或HTML元素分配一個引用ID

<input ref="input" />

當你想以程式設計方式將這個輸入焦點放到元件掛載上，這可能是有用的。

const app = Vue.createApp({})

app.component('base-input', {
    template: `
        <input ref="input" />
    `,
    methods: {
        focusInput() {
            this.$refs.input.focus()
        }
    },
    mounted() {
        this.focusInput()
    }
})

此外，你可以新增另一個ref到元件本身，並使用它來觸發來自父元件的focusInput事件

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput.focusInput()

$refs只在元件呈現後填充，它只是作為直接操作子元件的口子——應該避免從模板或計算屬性中訪問$refs

is

期望值：string | Object(元件選項物件)

用於動態元件

例如：

<!-- 當currentView變化時，component改變 -->
<component :is="currentView"></component>