vue3.0新增和删除的内容

新增组件

<teleport>：任意传送门

• 作用：teleport 是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术。
• 解决问题：如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用Teleport 就可以方便的解决组件间 css 层级问题。
• 写法：

<teleport to="body">    //to后面跟父组件名称或id
    <p>Hello, I'm a teleport window.</p>
</teleport>

• 注意： 在指定to的节点时，要保证添加到的节点已经渲染完成，多个teleport按顺序渲染在目标组件下。

<suspense>

• 作用：替代v-if和v-else，并给异步操作加上效果
• 应用场景：在页面加载之前显示加载动画、显示占位符内容、处理延迟加载的图像等
• 写法：

<suspense>
    <template #default>
        <suspenseDemo />    //此处是一个异步的组件
    </template>

    <template #default>
       <div>正在拼命加载中。。。。。。</div>
    </template>
</suspense>

删除部分

移除$on, $off 和 $once方法

        Vue3.0中不能使用eventBus，但是新增了mitt

import mitt from 'mitt'

const emitter = mitt()

// 监听
emitter.on('foo', e => console.log('foo', e) )

// 触发
emitter.emit('foo', { a: 'b' })

移除filters

        可以使用计算属性或者方法

移除keycode

        可以用别名来代替，但不支持keycode码

全局API调用方式改变

        2.0引用全部vue，用vue调用；3.0按需引用，用createApp代替vue进行调用

import { createApp } from 'vue'

const app = createApp({})
app.mixin()
app.use(...)

        由于Vue3中全局API都会通过app.xxx的方法调用，所以之前通过Vue.prototype.xxx绑定的全局方法和变量将无法使用，可以采用如下方式来代替：

//在main.js中：
app.config.globalProperties.http = function(){}

//在vue组件中：
this.http()

render方法修改

// 2.0写法
export default {
    render(h) {
        return h('div')     // h(标签, {属性},内容)
                            // h(标签, {属性},[可以继续嵌套h()])
    }
}

// 3.0写法
import { h } from 'vue'

export default {
    render() {
        return h('div'，{id: 'app'},[h('p',{},[])])
    }
}