一、v-for 与 v-if 优先级

1. vue2版本 在同一上元素 v-for > v-if

2. vue3版本 在同一上元素 v-if > v-for

v3-migration.vuejs.org/breaking-ch…

二、v-for中的ref

1.vue2中 会自动创建数组将for里的ref放进去

2. vue3 则是绑定方法去手动放入数组

<template>
  <ul>
      <li v-for="item in 5" :key="item" :ref="setItemRef">
          {{item}}
      </li>
    </ul>
</template>
<script setup>
  let arrRef = []
  
  setItemRef(el){
      arrRef.value.push(el)
  }
</script>

三、$children

1. vue2 :访问当前实例的直接子组件

2. vue3: 不在支持

四、数据绑定的区别

1. vue2

1. 概念

在vue2中是遍历data中所有对象的属性加上definedProprerty()实现的

2. 实现

let m = {
    o: '你好',
    b: "哈哈",
    arr: ['我','爱','你']
}
Object.keys(m).forEach(item=>{
    Object.definedProperty(m, key, {
        get(){
            return m[key]
        },
        set(){
            console.log('修改了')
        }
    })
})

3. 特点

不能监听数组的变化

必须遍历对象每一个属性

不仅要递归还要遍历

2. vue3

1. 概念

直接将传入的值用Proxy包起来

2. 实现

let m = {
    o: '你好',
    b: "哈哈",
    arr: ['我','爱','你']
}
let o =new Proxy(m, {
    get(target,key) {
        return target[key];
    },
    set(){
        console.log('修改了')
    }
})

3. 特点

不用遍历每一个属性

也不能直接监听数组

只需要递归一次就行