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>