VUE3.X——模板指令

1. 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')
     

2. key属性（唯一标识：为了高效地更新虚拟DOM）

   • key 属性不再建议在 v-if v-else v-else-if 上使用，Vue3.x将会自动生成
     2.X语法

     <div v-if="condition" key="yes">Yes</div>
     <div v-else key="no">No</div>
     

     3.X语法

     <div v-if="condition">Yes</div>
     <div v-else>No</div>
     

   • 如果主动添加 key 属性，必须要使用唯一值，不再允许使用 key 来强制分支重用
     2.X语法

     <div v-if="condition" key="a">Yes</div>
     <div v-else key="a">No</div>
     

     3.X语法

     <!-- 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语法

     <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>
     

     3.X语法

     <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>
     

3. v-if 与 v-for 一同使用时优先级更改
   在2.x中，v-if 与 v-for 一同使用时，v-for 的优先级大于 v-if ，3.x中，v-if 优先级将大于 v-for
   迁移策略
   由于语法上的歧义，避免在同一元素上使用它们

4. 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属性，再定义各个属性

5. 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)
       }
     }
     

目录：VUE3.X笔记目录
上一篇：VUE3.X——起步
下一篇：VUE3.X——reactive与ref