共计 2517 个字符,预计需要花费 7 分钟才能阅读完成。
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 属性
- 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>
<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 也能够是响应式的且能够被监听。
正文完