vue3学习总结

v-model

2.x语法

<childComponent :title.sync="oldValue"></childComponent>

this.$emit('update:title',newValue)

3.x语法

<childComponent v-model:title="oldValue"></childComponent>

​ 所有v-model不到参数，一定要改变道具和事件名称，以modelValue和updata:modelValue区别

<childComponent v-model="oldValue"></childComponent>

export default{
    props:{
        modelValue: String
    },
    methods:{
        changePageTitle(title){
            this.$emit('update:modelValue',title)
        }
    }
}

---

v-for v-if 的优先级

v-if 的优先级高于 v-for

---

key 属性

key属性可以放在 template 幽灵节点里

<!-- Vue 2.x -->
<template v-for="item in list">
  <div v-if="item.isVisible" :key="item.id">...</div>
  <span v-else :key="item.id">...</span>
</template>

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div v-if="item.isVisible">...</div>
  <span v-else>...</span>
</template>

---

v-bind合并行为

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>

---

$refs

vue3中不再自动创建数组$refs

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