vue2和vue3的区别

一、vue2和vue3的区别

1.script部分（可以兼容vue2写法）

//vue2
<script>
// @ is an alias to /src
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data:()=>({
    msg:"123"
  })
};
</script>

//vue3
<script setup>

</script>

2.v-if和v-for的优先级比较

        2.x 版本中 v-for > v-if

        3.X 版本中 v-if > v-for
 

3.v-for中的Ref数组

        2.X 中会把ref自动填充内容

         

        3.X 中需要手动添加

<div v-for="(item) in 5" :key="item" :ref="setItemRef">
    {{item}}
</div>

<script>
export default {
  name: "HomeView",
  data:()=>({
    newRef:[]
  }),
  mounted(){
    console.log(this.newRef);
  },
  methods:{
    setItemRef(el){
      this.newRef.push(el)
    }
  }
};
</script>

 setup语法糖：

<div v-for="(item) in 5" :key="item" :ref="setItemRef">
      {{item}}
</div>

<script>
import {onBeforeUpdate,onUpdated} from 'vue';
export default {
  setup(){
    let msg='123'
    let newRef=[]
    const setItemRef=(el)=>{
      newRef.push(el)
    }
    onBeforeUpdate(()=>{
      newRef=[]
    })
    onUpdated(()=>{
      console.log(newRef);
    })
    return{
      setItemRef,
      msg
    }
  }
}
</script>

4. this.$children的区别

        2.X：访问当前实例的直接子组件

        3.X：已被移除不再支持，建议使用$refs