-
v-model
-
prop和event的默认名称更改:
value -> modelValue
input -> update:modelValue
-
移除
v-bind
的.sync
修饰符与组件的model
,并替换为v-model
-
3.x版本下的
v-model
可以在同一个组件上进行多个绑定 -
添加了创建自定义
v-model
修饰符的功能2.X语法
<!-- parent --> this.$emit('update:title', newValue); <!-- children --> <ChildComponent v-model="pageTitle" /> <!-- would be shorthand for: --> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" /> <!-- 可简化为.sync --> <ChildComponent :title.sync="pageTitle" />
3.X语法
<!-- parent --> this.$emit('update:title', newValue); <!-- children --> <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> <!-- would be shorthand for: --> <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" :content="pageContent" @update:content="pageContent = $event" />
迁移策略
<!-- 把代码中的.sync进行替换 --> <ChildComponent :title.sync="pageTitle" /> <!-- to be replaced with --> <ChildComponent v-model:title="pageTitle" />
自定义修饰符
<!-- html --> <div id="app"> <my-component v-model.capitalize="myText"></my-component> {{ myText }} </div>
// js const app = Vue.createApp({ data() { return { myText: '' } } }) app.component('my-component', { props: { modelValue: String, modelModifiers: { default: () => ({}) } }, methods: { emitValue(e) { let value = e.target.value if (this.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } this.$emit('update:modelValue', value) } }, template: `<input type="text" :value="modelValue" @input="emitValue">` }) app.mount('#app')
-
-
key属性(唯一标识:为了高效地更新虚拟DOM)
key
属性不再建议在v-if
v-else
v-else-if
上使用,Vue3.x将会自动生成
2.X语法
3.X语法<div v-if="condition" key="yes">Yes</div> <div v-else key="no">No</div>
<div v-if="condition">Yes</div> <div v-else>No</div>
- 如果主动添加
key
属性,必须要使用唯一值,不再允许使用key
来强制分支重用
2.X语法
3.X语法<div v-if="condition" key="a">Yes</div> <div v-else key="a">No</div>
<!-- Vue 3.x (recommended solution: remove keys) --> <div v-if="condition">Yes</div> <div v-else>No</div> <!-- Vue 3.x (alternate solution: make sure the keys are always unique) --> <div v-if="condition" key="a">Yes</div> <div v-else key="b">No</div>
<template v-for>
key
应放在<template>
标签上(2.x放在子标签上)
2.X语法
3.X语法<template v-for="item in list"> <div :key="item.id">...</div> <span :key="item.id">...</span> </template> <template v-for="item in list"> <div v-if="item.isVisible" :key="item.id">...</div> <span v-else :key="item.id">...</span> </template>
<template v-for="item in list" :key="item.id"> <div>...</div> <span>...</span> </template> <template v-for="item in list" :key="item.id"> <div v-if="item.isVisible">...</div> <span v-else>...</span> </template>
-
v-if
与v-for
一同使用时优先级更改
在2.x中,v-if
与v-for
一同使用时,v-for
的优先级大于v-if
,3.x中,v-if
优先级将大于v-for
迁移策略
由于语法上的歧义,避免在同一元素上使用它们 -
v-bind
现在对绑定顺序敏感-
v-bind
的绑定顺序将影响渲染结果,在2.x语法中,vue假设开发人员希望单个属性始终覆盖定义的内容,在3.x语法中,开发人员将获得更多的控制权2.X语法
<!-- template --> <div id="red" v-bind="{ id: 'blue' }"></div> <!-- result --> <div id="red"></div>
3.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-bind
属性,再定义各个属性
-
-
ref
与v-for
一同使用时,将不再为$refs
注册数组- 在2.x中,当
v-for
用于元素或组件的时候,$refs
的引用信息为包含DOM节点或组件实例的数组,即:console.log(this.$refs)
可以看到打印出来的是一个数组 - 在3.x中,
$refs
将不再自动创建数组,如果要从单个绑定中检索多个refs,需要把ref
绑定到一个函数上以获得更大的灵活性<div v-for="item in list" :ref="setItemRef"></div> export default { data() { return { itemRefs: [] //不一定是数组,也可以是一个对象 } }, methods: { setItemRef(el) { this.itemRefs.push(el) } }, beforeUpdate() { this.itemRefs = [] }, updated() { console.log(this.itemRefs) } }
- 在2.x中,当
目录:VUE3.X笔记目录
上一篇:VUE3.X——起步
下一篇:VUE3.X——reactive与ref