Vue3技术8之Fragment、Suspense、Vue3中其他的改变

最新推荐文章于 2024-02-28 23:13:24 发布
最新推荐文章于 2024-02-28 23:13:24 发布
阅读量825 收藏 1
点赞数
分类专栏： Vue3基础 前端 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/130367906
版权

Vue3技术8

Fragment

  1. 在Vue2中：组件必须有一个根标签
  2. 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
  3. 好处：减少标签层级，减少内存占用
    在这里插入图片描述

Teleport

弹窗案例

目录结构

在这里插入图片描述

App.vue

<template>
  <div class="app">
    <h1>我是App组件</h1>
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";

export default {
  name: 'App',
  components: {Child},
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h1>我是Child组件</h1>
    <Son></Son>
  </div>
</template>

<script>
import Son from "@/components/Son";
export default {
    name: "Child",
  components: {Son}
}
</script>

<style scoped>
.child{
  background-color: orange;
  padding: 10px;
}
</style>

Son.vue

<template>
  <div class="son">
    <h1>我是Son组件</h1>
    <Dialog></Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  name: "Son",
  components: {Dialog},
}
</script>

<style scoped>
.son{
  background-color: pink;
  padding: 10px;
}
</style>

Dialog.vue

<template>
  <div>
    <button @click="isShow=true">点我弹个窗</button>
    <teleport to="body">
      <div class="mask"  v-if="isShow">
        <div class="dialog">
          <h3>我是一个弹窗</h3>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <button @click="isShow=false">关闭弹窗</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
    name: "Dialog",
  setup(){
      let isShow=ref(false)
    return{
        isShow
    }
  },
}
</script>

<style scoped>
.mask{
  position: absolute;
  top: 0;bottom: 0;left: 0;right: 0;
  background-color: rgba(0,0,0,0.5);
}
.dialog{
  width: 300px;
  height: 300px;
  background-color: skyblue;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>

请添加图片描述

总结

  1. 什么是Teleport？——Teleport是一种能将我们的组件html结构移动到指定位置的技术
<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow=false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

普通写法

App组件和Child组件是一起加载出来的

App.vue

<template>
  <div class="app">
    <h1>我是App组件</h1>
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";  //静态引入

export default {
  name: 'App',
  components: {Child},
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h1>我是Child组件</h1>
  </div>
</template>

<script>
export default {
    name: "Child",
}
</script>

<style scoped>
.child{
  background-color: orange;
  padding: 10px;
}
</style>

请添加图片描述

使用suspense之后

App.vue

<template>
  <div class="app">
    <h1>我是App组件</h1>
    <suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中...</h3>
      </template>
    </suspense>
  </div>
</template>

<script>
// import Child from "@/components/Child";  //静态引入
import {defineAsyncComponent} from 'vue'
const Child=defineAsyncComponent(()=>import('@/components/Child'))  //异步引入
export default {
  name: 'App',
  components: {Child},
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h1>我是Child组件</h1>
  </div>
</template>

<script>
export default {
    name: "Child",
}
</script>

<style scoped>
.child{
  background-color: orange;
  padding: 10px;
}
</style>

请添加图片描述

不再自己调整网络低速

Child.vue

<template>
  <div class="child">
    <h1>我是Child组件</h1>
    <div>{{sum}}</div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
    name: "Child",
  async setup(){
      let sum=ref(0)
      const p=  new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({sum})
        },3000)
      })
    return await p
  }
}
</script>

<style scoped>
.child{
  background-color: orange;
  padding: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <h1>我是App组件</h1>
    <suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中...</h3>
      </template>
    </suspense>
  </div>
</template>

<script>
// import Child from "@/components/Child";  //静态引入
import {defineAsyncComponent} from 'vue'
const Child=defineAsyncComponent(()=>import('@/components/Child'))  //异步引入
export default {
  name: 'App',
  components: {Child},
}
</script>

<style scoped>
.app{
  background-color: gray;
  padding: 10px;
}
</style>

总结

补充setup的一个知识点

  1. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

Suspense总结

  1. 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
  2. 使用步骤
    （1）异步引入组件
import {defineAsyncComponent} from 'vue'
const Child=defineAsyncComponent(()=>import('@/components/Child'))  //异步引入

（2）使用Suspense包裹组件，并配置好default与fallback

<template>
  <div class="app">
    <h1>我是App组件</h1>
    <suspense>
      <template v-slot:default>
        <Child/>
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中...</h3>
      </template>
    </suspense>
  </div>
</template>

Vue3中其他的改变

全局API的转移

  1. Vue 2.x 有许多全局 API 和配置。
    例如：注册全局组件、注册全局指令等
//注册全局组件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注册全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }

  1. Vue3中对这些API做了调整
    将全局的API，即：Vue.xxx调整到应用实例（app）

    2.x 全局 API（Vue）3.x 实例 API (app)
    Vue.config.xxxxapp.config.xxxx
    Vue.config.productionTip移除
    Vue.componentapp.component
    Vue.directiveapp.directive
    Vue.mixinapp.mixin
    Vue.useapp.use
    Vue.prototypeapp.config.globalProperties

其他改变

  1. data选项应始终被声明为一个函数。
  2. 过度类名的更改：

  • Vue2.x写法

    .v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

  • Vue3.x写法

    .v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}
  1. 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes
  2. 移除修饰符

  • 父组件中绑定事件

    <my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

  • 子组件中声明自定义事件

    <script>
  export default {
    emits: ['close']
  }
</script>
  1. 移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

  1. …
VillanelleS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3 - Fragment 片段（详细教程）
王佳斌
11-13 3298
Vue3 官方文档，vue3快速入门-Fragment(片段)，Vue3的fragment，快速了解Vue3中的Fragment片段，如何使用 vue3 的 Fragment？vue3学习笔记之Fragment和Emits，Vue3中的新特性 Fragment，Vue 3中令人激动的新功能:Fragment，Vue3 - Fragment 片段（详细教程）。
vue-fragment:Vue.js的非常好的片段组件
05-09
Vue片段 什么 Vue.js的非常好的片段组件 为什么 如果您到达这里，我想您已经进行了艰苦的搜索，并且知道为什么会在这里。 对于其他对象，片段基本上是无根组件。 在许多情况下，当您不想用无用的容器污染DOM或想一次返回许多元素时，它们很有用。 如何 由于Vue.js vDOM diffing具有“您应该返回一个根元素”的限制，因此无法使用功能组件或插槽……相反，我使用的是（内部）指令，该指令将转储片段根节点的所有子节点到它的位置。 由于指令可以操纵DOM，因此我们可以在渲染后采取行动并绕过Vue限制。 该组件称为Fragment因此当Vue3本机片段到达时，您无需更改太多代码。 就是说，我不是Vue.js的核心开发人员，并且我对Vue.js的实现没有任何看法。 我只知道碎片是什么，以及碎片应该如何工作，并竭尽所能复制碎片。 所以应该没问题 用 下载软件包npm i -s vue-f
使用Fragments（片段）提升你的Vue.js开发体验
最新发布
你若盛开，清风自来
02-28 1091
在Vue.js开发中，Fragments（片段）是一个经常被忽略的功能，但它能显著提升我们的开发效率。本文将介绍Fragments的概念、优势以及如何在Vue.js中使用它们。🌈在Vue.js中，一个组件通常只有一个根元素。这意味着你必须将所有的子元素放在这个根元素内。但有时候，你可能会有多个根元素，这时Fragments就派上用场了。Fragments允许组件有多个根节点，这样你就可以将多个元素组合在一起，而不必局限于单一的根元素。这不仅使得模板更加清晰，而且在某些情况下，可以避免一些不必要的标记。
vue3中使用Web Worker多线程（JS原味版）
06-17
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125300644
vue3核心技术实战第一版
04-13
介绍vue3最新特性，新的API，高级知识，以及和Python/Java后端结合的实战案例。
vue 编码但不渲染的标签 vue-fragment
热门推荐
sunyaqi_的博客
08-30 1万+
vue 编码但不渲染的标签 vue-fragment vue 下载包: npm i -s vue-fragment 在main.js 里添加代码 import Fragment from 'vue-fragment' Vue.use(Fragment.Plugin) 在文件里就可以直接用<fragment> 元素了 <template> <fragment> <div>test</div> </fragment> &lt
Vue3的fragment
richest_qi的博客
03-20 4242
vue2时，组件的模板结构中出现多个标签时，需要使用根标签。 vue3时，组件的模板结构中出现多个标签时，可以不用根标签。这是因为vue3会自动将多个标签用Fragment组件包裹。 举个例子。 main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') App.vue <template> <h2>当前和值为{{sum}}</h
Vue3之Fragment
youhebuke225的博客
06-11 489
Fragment
vue3 的Fragment组件
MCCLS的博客
09-15 902
即可以实现不需要在组件上写入一个根标签了
Vue3中的fragments函数详解：更高效的组件渲染方式
zihan0321的博客
11-19 344
而Fragments函数的使用可以避免这种情况的出现，从而提高页面的性能和灵活性。使用 Vue3、Vite、ElementPlus、Pinia最新开发技术栈， 拥有完整的Token登录鉴权、路由配置、界面简洁美观，可根据需要灵活配置主题、系统采用响应式布局，自适应各类屏幕尺寸、源代码有详细的注释，便于使用和升级、授权用户有专属技术服务群。系统已经帮您完成了后台管理的大部分功能、代码都有详细的注释、系统附带各类型的演示示例，获取授权后，可提供在线专属技术服务，随时解答使用中遇到的各类问题。
Vue 3 中的 Fragments 是什么？如何使用它
stormjun的博客
08-05 2957
Vue 3 中的 Fragments 是一个非常有用的特性，它允许我们更简洁地组合和渲染多个子元素，而无需引入额外的包裹元素。通过使用<>和</>将多个子元素包裹起来，我们可以享受到简洁性、更好的性能和更好的样式控制。使用 Fragments 可以避免引入额外的包裹元素，从而减少对样式的影响。特别是在使用 CSS 布局库或者进行样式复用时，Fragments 可以提供更好的样式控制。
Vue中fragment.js使用方法详解
10-20
主要为大家详细介绍了Vue中fragment.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
Vue3新特性之在Composition API中使用CSS Modules
10-15
主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用 Fragment ，实现 Vue 的模板编译
记得抬头微笑
07-18 688
Vue会把用户在template标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成Fragment，而Fragment会经过patch过程从而得到将渲染的视图中的Fragment，最后根据Fragment创建真实的DOM节点并插入到视图中，最终完成视图的渲染更新。AFragment是原生JS的一种创建文档片段的方法，如果我们对根元素中的每个元素做逐个处理的话，这会引起很大的性能问题，会多次触发浏览器的回流和重绘。......
Vue3 Fragment（碎片化节点）
且听风吟的博客
05-10 4553
Fragment(碎片化节点)
vue2和vue3转换
02-24
Vue.js是一种流行的JavaScript框架，用于构建用户界面。Vue 2和Vue 3是Vue.js的两个主要版本，它们之间有一些重要的区别。下面是关于Vue 2和Vue 3转换的一些介绍： 1. 响应性系统：Vue 2使用基于Object.defineProperty的响应式系统来追踪数据的变化。而Vue 3使用Proxy来实现响应式系统，这使得追踪数据变化更加高效和灵活。 2. 组合式API：Vue 3引入了组合式API，这是一种新的API风格，可以更好地组织和重用组件逻辑。相比之下，Vue 2主要使用选项式API。 3. 性能优化：Vue 3在性能方面进行了一些改进，包括更好的树摇动优化、编译器优化和更小的包大小。这些改进使得Vue 3在运行时性能方面比Vue 2更好。 4. TypeScript支持：Vue 3对TypeScript的支持更加友好，包括更好的类型推断和类型定义。Vue 2也支持TypeScript，但Vue 3在这方面有更多的改进。 5. 其他改进：Vue 3还引入了一些其他改进，如Teleport（原名Portal）组件、Suspense组件、Fragment组件等，这些改进可以提供更好的开发体验和更灵活的组件结构。 如果你想将现有的Vue 2项目迁移到Vue 3，你需要注意以下几点： 1. 了解Vue 3的新特性和改变，以便适应新的API和语法。 2. 检查和更新你的代码，确保它在Vue 3中能够正常工作。特别是需要注意的是响应式系统的改变和组合式API的使用。 3. 更新相关的依赖项，如Vue Router和Vuex等，以确保它们与Vue 3兼容。 4. 迁移过程中，可以使用Vue 2和Vue 3之间的适配器库，如vue-demi，来简化迁移过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值