从vue2到vue3的变化总结

1. Vue3的<template>支持多个根标签，而Vue2只允许一个根标签存在
2. Vue3使用的是createApp(组件)

const app = createApp(APP) 
app.use(router) 
app.mount('#app');

渲染APP组件，并挂载到id为app的标签上，而Vue2使用的new Vue(template,render)

new Vue({
    router,
    store,
    render: h => h(App)}).$mount('#app');

3.新的v-model代替之前的v-model和.sync

• vue3

//父组件
<Switch :value =checked @update:value="checked=$event"/>
//子组件
 const toggle =()=>{
                context.emit('update:value',!props.value)
            }
            return {
                toggle
            }

若子组件的update:value与父组件的一致，可改写成

//父组件
<Switch v-model:value =checked/>

即v-model代替我们写好了后面@update的内容

4. 新增了context.emit，这个与this.$emit的作用相同，但是值得注意的点是this.$emit是不能在setup()中使用的，必须在methods中使用，但是在vue3中，可以不使用methods，全部在setup中写函数

setup(props,context){
            const toggle =()=>{
                context.emit('update:value',!props.value)
            }
            return {
                toggle
            }

        }

5.v-if的优先级永远比v-for要大，所以两个不能在一起用，建议在外面包裹一个wrapper，在这里面写v-if