乐趣区

关于html:Vue3中模板指令的非兼容变更

jiezi

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 也能够是响应式的且能够被监听。
退出移动版