Vue Grid Layout -️ 适用Vue.js的栅格布局系统
'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.eslint-plugin-vue
在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
<ChildComponent v-model:title="pageTitle" /> <!-- 是以下的简写: --> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> <!-- 是以下的简写： --> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" />
除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：
<ChildComponent v-model.capitalize="pageTitle" />
v-bind 合并行为
在 2.x 中，如果一个元素同时定义了
v-bind="object" 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。在 3.x 中，如果一个元素同时定义了
v-bind="object" 和一个相同的独立 attribute，那么绑定的声明顺序将决定它们如何被合并。换句话说，相对于假设开发者总是希望独立 attribute 覆盖 object 中定义的内容，现在开发者能够对自己所希望的合并行为做更好的控制。 v-if 与 v-for 的优先级对比
2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。
3.x 版本中 v-if 总是优先于 v-for 生效。
key Attribute
<template v-for>
在 Vue 2.x 中，<template> 标签不能拥有 key。不过，你可以为其每个子节点分别设置 key。
在 Vue 3.x 中，key 则应该被设置在 <template> 标签上。
类似地，当使用 <template v-for> 时如果存在使用 v-if 的子节点，则 key 应改为设置在 <template> 标签上。
v-if/v-else/v-else-if
在 Vue 2.x 中，建议在 v-if/v-else/v-else-if 的分支中使用 key。
但是我们不再建议在 v-if/v-else/v-else-if 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。
非兼容变更体现在如果你手动提供了 key，那么每个分支都必须使用一个唯一的 key。因此大多数情况下都不需要设置这些 key。
移除 v-on.native 修饰符
程序员灯塔
转载请注明原文链接：vue3踩坑记录
转载请注明原文链接：vue3踩坑记录