前端系列十一：Vue3较Vue2变化

一 新特性：Teleport 传送门：

它可以指定它里面内容的父元素

    它可以在别的组件里使用，但是它可以让控制权还是在自己手上

写法：

    在别的组件注册引用组件

    在自己组件里写上功能
        
    //to 代表要去的地方显示   一般传送门写在teleport标签里

    <button  @click="modelOpen = true">弹出一个模态框</button>
    <teleport  to="body">
        <div  v-if="modalOpen"  class= "model">
            <div>
                   这是一个弹窗  我的元素是body
               <button @click="modalOpen = false">关闭</button>
            </div>
        </div>
    </teleport>

二 新特性：Fragments  ：

它的功能就是可以让Vue3里有很多根的template模板，在
    Vue2里只能有一个template模板

三 新特性：Emits Component Option：

Vue3组件中发送自定义事件需要定义在emits选项中：
    
    因为同一个事件名，原生事件会触发两次 比如click

    更好的指示组件工作方式

    对象形式事件校验

写法：

    <template>
        <div @click="$emit('click')">
            <h3>自定义事件</h3>
        </div>
    </template>

    <script>
        export default {
            emits: ['click']            
            }
    </script>
 

四 Vue3较Vue2破坏性变化 ：

Clobal API 改为 应用程序实例调用

    Vue2中有很多全局api可以改变vue的行为， 比如 Vue.component,这会导致一些问题:

    vue2没有app概念, new Vue( ) 得到的根实例被作为app, 这样的话所有创建的根实例是共享
相同的全局配置,这在测试时会污染其他测试用例,导致测试变得困难。

    全局配置也导致没有办法在单页面创建不同全局配置的多个app实例。

    Vue3中使用createApp返回app实例,由它暴露一系列全局api

    
定义全局组件写法：

    在main.js引入

    import  { createApp } from ' vue '

    const app = createApp ( { } )
        .component( 'comp', { render : ( ) => ('div', 'i am comp' )  }  )
        .mount( '#app' )

Vue2里在Vue3里废除掉的：

    Vue2 :                                                        Vue3 :
              Vue.config                                                  app.config
    Vue.config.productionTip                            removed(see below)
    Vue.config.ignoredElements                        app.config.isCustomElement(see below )
    Vue.component                                           app.component
    Vue.directive                                                app.directive
    Vue.mixin                                                     app.mixin
    Vue.use                                                        app.use( see below)
    Vue.filter                                                      removed

五 新特性 Clobal and internal APls 重构为可做摇钱树优化 ：

vue2中不少global-api 是作为静态函数直接挂在构造函数上的,例如 Vue.nextTick( ),如果
我们从未在代码中用过它们,就会形成所谓的 dead code 这类global-api 造成的 dead code 无法使用
webpack的tree-shaking 排除掉 

    在Vue3中做了相应的变化,将它们抽取成为独立函数,这样打包工具的摇钱优化可以将这些dead
code排除掉

写法：

    import { nextTick }  from 'vue'

    nextTick( () => {
    
    })

受影响api:

    Vue.nextTick
    Vue.observable(replaced by Vue.reactive)
    Vue.version
    Vue.compile( only in full builds )
    Vue.set( only in c )