Vue3，入门

        当初，vue刚展现在人们的视野中时，有多少人看不起其价值。现如今vue又多么的火热，而Vue3现如今也是当初的那个模样。无他，不过是学新的知识是困难的，不好接受而已，都是如此。

        vue3的特点：

                vue3基本兼容vue2，这句话就基本概括了vue3的特点。再多就是按需引用，

                组合式 api：更加接近原生的js，更加直观。 没有this，更有效的降低了代码的耦合性。

        全局挂载方法：

                app的启动：

                        var app = createApp（App）；

                        app.use(store).use(router).mount('#app')

                全局方法：

                        app.config.globalProerties.$http=()=>{}

        srtup组合api：

                ref：定义值类型数据
                reactive：定义引用类型的数据

                import{ref,reactive}from 'vue'

                set(){

                const num=ref(5)

                const list=reactive(["vue","react","angular"])

                return{num,list}

                }

                {{num}}

                <p v-for=item in list></p>

        compositionApi:

                1.语义明确                2.书写简洁                3.阅读直观，不需要通过vue再编译

                4.复用性，低耦合性更强                5.和react hooks异曲同工

                6.按需加载        import{ref，reactive} from 'vue'

        srtup：

                在beforecreated之前调用

                里面的this不是当前实例

        响应式数据：

                ref：const num=ref（0）

                        return{num}

                        使用：<tag>{{num}}</tag>

                reactive：引用类型的数据

                                const list=reactive（[xxx.yyy]）

                                const obj =reactive({name:"mumu",age:18})

        computed(计算)：

                const rmsg=computed（（）=>num.value.split(' ').reverse().join(' ')）

                cosnt counter=computed（{

                set：v=>num.value+=1,

                get:()=>num.value

                }）

        watchEffect(监听)：

                const stop=watchEffect（（）=>{

                console.log(num.value)

                localstorage.setltem("num",num.value.toString())

                }）

        watch:监听单个对象

                watch（num，（num，preNum）=>{

                }）

                watch（（）=>list[0],(value,preValue)=>{

                }）

        生命周期：

                beforeCreate

                created

                ==

                setup

                onMount，onMounted，onUpdate，onUpdated，onDestroy，onDestroyed

                和vue2生命周期是一样的，加一个on

        setup（props，ctx）：

                props传递过来的属性

                ctx|context 上下文：

                        ctx.attrs        属性                ctx.slots        插槽

                        ctx.parent        父组件                ctx.root        根组件

                        ctx.emit        发送事件                ctx.refs        dom节点

        组件传递：

                父传子        props

                子传父        emit发送事件

        全局配置：

                app。config。globalProperties