Vue学习笔记---Vue3模板指令(对比Vue2)

1.v-model

• vue2.0：绑定value属性以及input事件，修改属性以及事件名称需在组件定义中添加model选项，model{ prop：'title', event: 'change' } //绑定title属性，change事件改编title属性绑定值
• v-bind.sync：:title.sync绑定属性，组件内部通过this.$emit(‘update:title’,newValue)更新
• vue3.0：v-model:title直接绑定title属性，组件内部通过this.$emit(‘update:title’,newValue)更新。对于不带参数的v-model，prop更改为modelValue，event更改为update:modelValue
• 处理修饰符：自定义修饰符将通过props选项中的modelModifiers属性提供给组件，通过’this.modelModifiers.修饰符’获取修饰符的布尔值

2.key

• v-if/v-else/v-else-if：
  • vue2.0：可以使用相同的key或不同的key
  • vue3.0：自动生成key，若指定则需使用不同的key
• < template v-for >：
  • vue2.0：template不能有key，子节点可以设置key
  • vue3.0：key应该设置在template标签上

3.其他

• v-if与v-for同时使用：v-if的优先级高
• v-bind：与单独属性定义冲突时，绑定顺序在后面的优先
• v-for与ref结合使用：不再产生$refs数组，ref绑定到一个函数’itemRefs.push(el)'中
• mixins选项：仅合并根级属性，根级属性内部存在差异时内部不再合并
• data选项：不再接受object，而需要使用function返回的object

4.删除

• .native修饰符
• 键码修饰符
• functional属性
• $children属性（访问子组件实例建议使用$refs）
• $listeners属性
• $on，$off、$once 方法
• 过滤器：可替换成方法调用或计算的属性或定义全局过滤器app.config.globalProperties.$filters，调用$filters.function()
• 内联模板：父组件上定义属性inline-template则将内部内容视为其模板