Vue3中模板指令的非兼容变更

Posted 2021-09-27 月岛蘑菇

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 也可以是响应式的且可以被监听。