vue3和vue2的区别

1.Vue2 与vue3 最大的区别是vue2使用选项类型api，对比vue3组合型api。vue2选项型api在代码里分割了不同得属性：data,computed,methods等；vue3合成型api能让我们使用方法来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。
2.vue3可以在setup里面定义多个生命周期，vue2的生命周期只能一个。
3.reactive实现对象的响应式数据,ref一般用于简单数据类型的响应式（也可以用于对象），toRef是将响应式对象的某个属性单独变为响应式（使用场景是不需要返回整个对象，返回对象里面的某个属性也实现响应式）、

//响应式对象
    const obj = reactive({
      name:'ls',
      age:12
    })
    将对象的某个属性单独return出去
    const name = toRef(obj,'name')
    const updateName = ()=>{
      name.value ='zs' 
    }
    return{
      name,updateName
    }

4.toRefs使用场景，返回一个响应式对象obj，在div使用多个属性时需要obj.age比较麻烦，return时...obj,div使用name，age就是响应式数据

//响应式对象
    const obj = reactive({
      name:'ls',
      age:12
    })
    const obj2 = toRefs(obj)

    const updateName = ()=>{
      obj2.name.value ='zs' 
    }
    return{
      ...obj,updateName
    }

5.计算属性的值只读不改computed，高级用法可以使用get和set方法去修改响应式的值，从而改变计算属性的值。
6.watch可以单独监听ref和reactive响应式数据，也可以同时监听多个值,对象的某个值

watch([obj,count],()=>{
    console.log('监听多个数据变化了')
})
watch(()=>obj.age,()=>{
    console.log('监听对象的某个属性变化了')
})

7.ref拿到dom，在setup里面定义一个const dom = ref(null)并return出去,然后在onMounted可以拿到该dom.value，遍历获取多个子元素，先定义一个数组，再将子元素push进数组里面。

8.子组件拿到父组件传过来的值,第二个参数是子组件向父组件传值

//子组件
setup(props,{emit}){
    console.log(props.money)
    const changeMoney = ()=>{
        emit('change-money',50)
    }
    
}

//父组件
<Son :money='money' :change-money='updateMoney'/>

setup(){
    const money = ref(100)
    const updateMoney = (newvalue)=>{
        money.value=newvalue
    }
    return {money,updateMoney}
}

9.父孙组件的传值：provide和inj

10.vue3的v-model，父传子是:modelValue,子传父是@update:modelValue 11.全局混入，在main.js文件里面定义的app.mixin会所有组件都打印，this.$el是每个自组件的dom节点