vue2和vue3的区别

一、vue2和vue3的区别

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


//vue2
 
//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 中需要手动添加


for="(item) in 5" :key="item" :ref="setItemRef">
    {{item}}

setup语法糖：


for="(item) in 5" :key="item" :ref="setItemRef">
      {{item}}

<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