Vue3中模板指令的非兼容變動

Vue3中模板指令的非兼容變動

按鍵修飾符

從KeyboardEvent.keyCode has been deprecated 開始，Vue 3 繼續支持這一點就再也不有意義了。所以，如今建議對任何要用做修飾符的鍵使用 kebab-cased (短橫線) 大小寫名稱。

<!-- vue2.x -->
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
<!-- vue3.x -->
<input v-on:keyup.delete="confirmDelete" />

同時廢棄了全局config.keyCodes選項

key屬性

1. v-if/v-else/v-else-if的key再也不是必須的，vue3.x會自動生成惟一key

不能夠經過手動提供key的方式，來強制重用分支

<!-- Vue 2.x 沒有必要在vue3.x這樣寫 -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>

<!-- Vue 2.x 這在vue3.x中會出現錯誤 -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="a">No</div>

<!-- Vue3.x 若是必定要指定key,請確保key值不重複 -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

1. <template v-for>的key應該設置在<template>標籤上，而不是設置在他的子結點上

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="item.id">...</div>
  <span :key="item.id">...</span>
</template>

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

v-if和v-for的優先級調整

這個可太棒了

在vue3中，v-if擁有比v-for更高的優先級

官網建議：
因爲語法上存在歧義，建議避免在同一元素上同時使用二者。
比起在模板層面管理相關邏輯，更好的辦法是經過建立計算屬性篩選出列表，並以此建立可見元素。

v-bind如今對排序敏感（v-bind的合併行爲）

若是在一個元素上同時定義了v-bind="object"和一個相同的單獨的property
那麼v-bind的綁定會被覆蓋

在vue3.x中 v-bind和單獨的property有排序關係，看代碼

<!-- vue2.x -->
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>

<!-- vue3.x -->
<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

v-on 的 .native 修飾符已被移除

vue3.x中新增了emits選項  
對於子組件中未被定義爲組件觸發的全部事件監聽器，Vue 如今將把它們做爲原生事件監聽器添加到子組件的根元素中 (除非在子組件的選項中設置了 inheritAttrs: false)

<!-- vue2.x -->
<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

<!-- vue3.x -->
<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>
<script>
  export default {
    emits: ['close']
  }
</script>

v-for中的ref再也不註冊ref數組

在 Vue 2 中，在 v-for 裏使用的 ref attribute 會用 ref 數組填充相應的 $refs property。當存在嵌套的 v-for 時，這種行爲會變得不明確且效率低下。

在 Vue 3 中，這樣的用法將再也不在 $ref 中自動建立數組。要從單個綁定獲取多個 ref，請將 ref 綁定到一個更靈活的函數上 (這是一個新特性)

<div v-for="item in list" :ref="setItemRef"></div>
<!-- 結合選項式API -->
<script>
export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      this.itemRefs.push(el)
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}
</script>
<!-- 結合組合式API -->
<script>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      itemRefs.push(el)
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      itemRefs,
      setItemRef
    }
  }
}
</script>

itemRefs 沒必要是數組：它也能夠是一個對象，其 ref 會經過迭代的 key 被設置。

若是須要，itemRef 也能夠是響應式的且能夠被監聽。