《Vue3新版本特性- 关键属性》由会员分享，可在线阅读，更多相关《Vue3新版本特性- 关键属性（25页珍藏版）》请在金锄头文库上搜索。
1、key属性破总览 新：key在v-if/v-else/v-else-if分支上不再需要s，因为Vue现在会自动生成唯一的keys。o BREAKING：如果您手动提供key，则每个分支必须使用唯一的key。您不再可以有意地使用它key来强制分支重用。 BREAKING：key应放置在标签上（而不是其子标签上）。背景在key特殊的属性被用作Vue公司的虚拟DOM算法的提示来跟踪一个节点的身份。这样，Vue知道何时可以重用和修补现有节点，以及何时需要重新排序或重新创建它们。有关更多信息，请参见以下部分： 清单渲染：维护状态 API参考：key特殊属性在条件分支上在Vue 2.x中，建议key在v-
2、if/v-else/v-else-if分支上使用s。YesNo123上面的示例在Vue 3.x中仍然有效。然而，我们不再推荐使用key的属性v-if/v-else/v-else-if枝，因为独特keys的现在会自动在条件分支产生的，如果你不为他们提供。YesNo123重大变化是，如果您手动提供key，则每个分支必须使用唯一的key。在大多数情况下，您可以删除这些key。YesNoYesNoYesNo1234567891011用在Vue 2.x中，标记不能包含key。相反，您可以将keys放在其每个子元素上。 . .12345在Vue 3.x中，key应该将放在标签上。 . .12345同样，当
3、与使用的孩子一起使用时v-if，key应将上移到标签。 . . . .v-bind合并行为破总览 BREAKING：v-bind的绑定顺序将影响渲染结果。介绍在元素上动态绑定属性时，常见的情况是v-bind=object在同一元素中同时使用语法和单个属性。但是，这就合并的优先级提出了疑问。2.x语法在2.x中，如果一个元素既v-bind=object定义了又定义了相同的单个属性，则单个属性将始终覆盖object。12343.x语法在3x中，如果元素既v-bind=object定义了属性又定义了相同的单个属性，则绑定的声明顺序决定了如何合并它们。换句话说，object开发人员现在不再假设开发人员
4、希望单个属性始终覆盖定义的内容，而是对所需的合并行为具有更多的控制权。123456789迁移策略如果您依赖于的此覆盖功能v-bind，我们建议您确保v-bind先定义属性，再定义各个属性。v-if与v-for优先破总览 BREAKING：如果在同一元素上使用，v-if优先级将高于v-for介绍Vue.js中最常用的两个指令是v-if和v-for。因此，当开发人员想同时使用两者时就不足为奇了。尽管不建议这样做，但有时可能有必要这样做，因此我们想提供有关其工作方式的指南。2.x语法在2.x中，当在同一元素上使用v-if和v-for时，v-for将优先使用。3.x语法在3.x中，v-if优先级始终高
5、于v-for。迁移策略由于语法上的歧义，建议避免在同一元素上同时使用它们。实现此目的的一种方法不是创建模板级别的方法，而是创建一个计算出的属性，该属性可以过滤掉可见元素的列表。v-model破总览在变化方面，概括地说： BREAKING：在自定义组件上使用时，v-modelprop和event的默认名称已更改：o 道具：value-modelValue;o 事件：input-update:modelValue; BREAKING：v-bind的.sync修饰符和组件model选项已删除，并替换为上的参数v-model； 新：v-model现在可以在同一组件上进行多个绑定； 新：添加了创建自定义
6、v-model修饰符的功能。有关更多信息，请继续阅读！介绍Vue 2.0发布时，该v-model指令要求开发人员始终使用该value道具。而且，如果开发人员出于不同目的需要不同的道具，他们将不得不使用v-bind.sync。此外，该硬编码之间的关系v-model，并value导致问题与如何自然元素和自定义元素进行处理。在2.2中，我们引入了modelcomponent选项，该选项允许组件自定义要用于的道具和事件v-model。但是，这仍然只允许v-model在组件上使用一个。使用Vue 3，用于双向数据绑定的API正在标准化，以减少混乱并允许开发人员使用该v-model指令更大的灵活性。2.x
7、语法在2.x中，v-model在组件上使用a等效于传递value道具并发出input事件：12345如果我们想将属性名称或事件名称更改为其他名称，则需要model向ChildComponent组件添加一个选项：123/ ChildComponent.vueexport default model: prop: title, event: change , props: / this allows using the value prop for a different purpose value: String, / use title as the prop which take the p
8、lace of value title: type: String, default: Default title 1234567891011121314151617因此，v-model在这种情况下，1个使用v-bind.sync在某些情况下，我们可能需要对道具进行“双向绑定”（有时除了v-model针对不同的道具存在之外）。为此，我们建议以的模式发出事件update:myPropName。例如，对于ChildComponent带有titleprop的上一个示例，我们可以通过以下方式传达分配新值的意图：this.$emit(update:title, newValue)1个然后，如果需要，父级可以侦听该事件并更新本地数据属性。例如：1个为了方便起见，我们使用.sync修饰符来简化此模式：1个3.x语法在3.xv-model中，自定义组件等效于传递modelValue道具并发出update:modelValue事件：12345678v-model论点要更改模型名称，
