新增组件
<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',{},[])])
}
}