vue3新组件

发表于 更新于 分类于 ， 阅读次数： Waline： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

Teleport

  • 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

场景：
点击button按钮，会出现弹窗，我们想要弹窗fixed定位出现在视口中央位置
如果我们给父元素添加了一个filter滤镜样式，会发现定位失效了，它变成了相对父元素的定位，但是又不能删掉filter，这个时候，就可以用teleport

当然，影响这个position: fixed的不仅仅有filter

1
2
3
4
5
6
7
8
// to的意思是，modal弹出来的时候，塞到哪里去
<teleport to='body' >
    <div class="modal" v-show="isShow">
      <h2>我是一个弹窗</h2>
      <p>我是弹窗中的一些内容</p>
      <button @click="isShow = false">关闭弹窗</button>
    </div>
</teleport>

最终，在页面呈现的时候，modal元素会从App里面出来，被放到主页面最下面，，而且它的逻辑不会拎出去

Suspense加载异步组件

  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
  • 使用步骤：
    • 异步引入组件
    • 使用Suspense包裹组件，并配置好default 与 fallback
  • 使用场景：子组件在setup里面写了着异步任务，并且异步任务所提供的数据需要使用，想让它网速慢的时候也能呈现一些东西，就可以用Suspense
1
2
import { defineAsyncComponent,Suspense } from "vue";
const Child = defineAsyncComponent(()=>import('./Child.vue'))
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense> // 底层是用插槽实现的
          <template v-slot:default> // 异步任务OK了才出现
            <Child/>
          </template>
          <template v-slot:fallback> // 异步任务没有做完的时候出现
            <h3>加载中.......</h3>
          </template>
        </Suspense>
    </div>
</template>

react路由懒加载时候 就是用suspense包裹 fallback定义loading

全局API转移到应用对象

这些都是vue2的一些全局API，vue3转移到了app实例对象身上（vue3里面是没有Vue构造函数的）
原来的Vue.xxx都变成了app.xxx

  • app.component：注册全局组件
    1
    2
    3
    // main.ts
    import Hello from './hello.vue'
    app.component('Hello',Hello)
  • app.config：配置对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // main.ts
    // 比如这个,x在任意组件都是可用的
    // 不过不推荐使用这个globalProperties，污染全局
    app.config.globalProperties.x = 99
    // 不过在使用的时候会爆红，不过不会报错，因为组件文件里没有x
    // 可以配置如下来解决： // vue文档有
    declare module 'vue' {
      interface ComponentCustomProperties{
        x:number
      }
    }
  • app.directive：注册全局指令
    1
    2
    3
    4
    5
    6
    app.directive('beauty',(element,{value})=>{
      element.innerText += value
      element.style.color = 'green'
    })

    <h2 v-beauty="啊啊啊啊">好开心</h2> // 使用 --- 页面显示 黄色的 好开心啊啊啊啊
  • app.mount：挂载应用
  • app.unmount：卸载
    1
    2
    3
    4
    // main.ts
    setTimeout(()=>{
      app.unmount() // 2s后，页面没了
    },2000)
  • app.use：安装插件

其他 - Vue3的非兼容性改变

意思是：Vue3里面，做了哪些和Vue2里面不一样的 // vue官方文档 - 从vue2迁移
也就是 ———— Vue2 和 Vue3的区别，所有人都得知道！

  • 过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。

  • keyCode 作为 v-on 修饰符的支持。

    vue2中可以@keyup.13，vue3中不允许了

  • v-model 指令在组件上的使用已经被重新设计，替换掉了 v-bind.sync。

    vue2中可以 :a.sync=’sum’，vue3中整合到v-model里了

  • v-if 和 v-for 在同一个元素身上使用时的优先级发生了变化。

    vue2中，v-if和v-for不可以用在一个标签上，因为v-for优先级更高
    vue3中，可以在同一个元素使用，并且v-if的优先级提的更高了

  • 移除了$on、$off 和 $once 实例方法。

  • 移除了过滤器 filter。

  • 移除了$children 实例 propert。

    ……