vue3 动态组件和异步组件

这篇具有很好参考价值的文章主要介绍了vue3 动态组件和异步组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.动态组件

<template>
  <div>
    <h1>组件切换</h1>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">点击切换组件</button>
  </div>
</template>

<script setup lang="ts">
import { markRaw, shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';


    const currentComponent = shallowRef(markRaw(ComponentA));

    const toggleComponent = () => {
      currentComponent.value = currentComponent.value === ComponentA ? markRaw(ComponentB) : markRaw(ComponentA);
    };

   

</script>
<!-- markRaw 方法用于将一个对象标记为 "原始",从而告诉 Vue 不需要将其转换为响应式对象。标记为 "原始" 的对象在响应式系统中不会被追踪更改,这可以帮助避免不必要的性能开销。

shallowRef 是用于创建一个浅的响应式引用的方法。与 ref 创建的响应式引用不同,shallowRef 不会对其内部对象进行深度观察,而只观察引用本身的变化。这意味着只有当引用本身发生变化时,才会触发更新,而不会递归观察引用内部对象的变化。

这两个方法通常用于特定场景下的性能优化。

在上述修改代码的例子中,我们使用 markRaw 将组件标记为非响应式的,避免了不必要的性能开销。而使用 shallowRef 创建浅的响应式引用,只观察引用本身的变化,而不观察组件内部的变化。这样可以保证在切换组件时,只有引用本身变化时才会触发组件的更新,提高了性能效率。 -->

当使用 <component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <KeepAlive>组件强制被切换掉的组件仍然保持“存活”的状态。

vue3 动态组件和异步组件,vue学习笔记,javascript,前端,vue.js文章来源地址https://www.toymoban.com/news/detail-715333.html

2.异步组件

<template>
  <div>
    <h1>组件切换</h1>
    <Keep-alive><component :is="currentComponent"></component></Keep-alive>
    
    <button @click="toggleComponent">点击切换组件</button>
  </div>
</template>

<script setup lang="ts">
import { markRaw, shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import { defineAsyncComponent } from 'vue'
const ComponentB =defineAsyncComponent(()=>import  ("./components/ComponentB.vue"))
    const currentComponent = shallowRef(markRaw(ComponentA));

    const toggleComponent = () => {
      currentComponent.value = currentComponent.value === ComponentA ? markRaw(ComponentB) : markRaw(ComponentA);
    };

   

</script>
<!-- markRaw 方法用于将一个对象标记为 "原始",从而告诉 Vue 不需要将其转换为响应式对象。标记为 "原始" 的对象在响应式系统中不会被追踪更改,这可以帮助避免不必要的性能开销。

shallowRef 是用于创建一个浅的响应式引用的方法。与 ref 创建的响应式引用不同,shallowRef 不会对其内部对象进行深度观察,而只观察引用本身的变化。这意味着只有当引用本身发生变化时,才会触发更新,而不会递归观察引用内部对象的变化。

这两个方法通常用于特定场景下的性能优化。

在上述修改代码的例子中,我们使用 markRaw 将组件标记为非响应式的,避免了不必要的性能开销。而使用 shallowRef 创建浅的响应式引用,只观察引用本身的变化,而不观察组件内部的变化。这样可以保证在切换组件时,只有引用本身变化时才会触发组件的更新,提高了性能效率。 -->

到了这里,关于vue3 动态组件和异步组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下: props数据只读,从父组件传递到子组件,子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种:原生的DOM事件和自定

    2024年02月13日
    浏览(48)
  • vue3中实现异步组件

    使用场景一:当组件进入视窗时再进行加载 假设页面中有三个组件A、B、C C组件中有一张图片 打开页面:   如果一个页面中的内容非常多,用户再首次打开时并没有浏览到下方的内容,但页面必须加载完下方的内容才会显示,这无疑非常影响性能 接下来我们做一些调整 创建

    2024年02月06日
    浏览(30)
  • Vue组件——动态、缓存、异步组件

    语法:静态:component is=\\\"组件名\\\"/component            动态:component :is=\\\"组件名\\\"/component 可以用来实现页面的切换: 问题:当我们在其中一个组件中写了一个输入框,在输入过一次后,切换到其他页面然后再切换回来时,之前输入的值就没有了。因为切换走当前组件时,该组

    2024年02月09日
    浏览(37)
  • 【Vue】动态组件和异步组件

    ‍‍今天我们来学习动态组件和异步组件。 什么是动态组件? 什么是异步组件? 代码示例: 解读代码: 子组件我给它起个名字叫做input-item,‍‍我创建这样的一个组件,然后它里面会有一个input框, 在这里面我可以用一下组件,怎么用? 我们直接在模板里面去写一下 i

    2024年02月08日
    浏览(40)
  • VUE组件--动态组件、组件保持存活、异步组件

    有些场景可能会需要在多个组件之间进行来回切换,在vue中则使用 component :is=\\\"...\\\" 来实现组件间的来回切换  changeHandler()使用三目运算符,来实现Component1和Component2之间的相互切换  默认为组件1   当组件1切换到组件2时,组件1会被强行销毁 初始态:  点击“更新数据”: 点

    2024年01月19日
    浏览(36)
  • vue3父组件异步props传值,子组件接收不到值问题

    当我们使用vue3进行开发在创建组件的时候,子组件经常需要调用父组件的数据,那么这是就需要vue3的props进行对父组件与子组件通信来达到传值的效果 在使用props进行父子组件通信时,子组件无法成功渲染数据,导致拿到数据为空问题 提示:这里填写问题的分析: 在使用

    2024年02月11日
    浏览(38)
  • watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题

    写静态数据的时候父组件传值子组件接收并渲染是没问题的,但当父组件异步获取数据,子组件接收数据会晚于渲染,就会产生接收不到的问题,我在用echarts绘制图表时图表就直接不显示  用watch监听props数据并在watch内进行赋值操作可解决该问题 直接上代码 父组件,vue3语法

    2024年02月15日
    浏览(43)
  • Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

    全局安装最新vue3 升级Vue CLI: 如果是比较旧的版本,可以通过下面命令来升级 通过脚手架创建项目 父组件 子组件 UserComponent.vue 父组件 **子组件1 JiaComponent.vue ** ** 子组件2 JianComponent.vue ** 父组件 子组件 TitleComponents.vue 父组件 **子组件 NavComponent.vue ** 父组件 子组件 NavCompone

    2024年02月05日
    浏览(41)
  • vue3 动态加载组件、动态引入组件

    1.问题 在做一个用 vite 构建的 vue3 项目时,动态拉取导入 .vue 页面,然后控制台一直有以下提示,页面也无法渲染出来。 2.分析 根据上面的报错提示,让我们安装并使用: @rollup/plugin-dynamic-import-vars 这个插件(最终没有这个方案)。 Vite官方文档说 需要使用Glob 导入形式 ,然

    2023年04月09日
    浏览(85)
  • vue前端性能优化之分包策略、异步组件、Gzip压缩

    目录 一、Gzip压缩 二、异步组件 三、分包策略 最后           项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步,也是最关键的一步,做一个项目并不是单单完成功能就算结束了,作为开发者,更要站在用户角度去进行项目体

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包