首页 > 其他分享 >vue3中动态组件

vue3中动态组件

时间:2022-10-06 16:02:21浏览次数:55  
标签:缓存 DOM 活动状态 实例 vue3 组件 动态

动态切换组件
代码如下(示例):

 

 

1.markRaw
标记一个普通对象,使得它不可以被转换成响应式对象。简单来说,就是组件不需要响应式,这样可以提高性能。

2.keep-alive
组件在非活动状态,依旧保持组件的实例。即组件被切换时,状态不会被重置。
当一个组件实例从 DOM 中移除但它是由 缓存的组件树的一部分时keepalive,它会进入停用状态而不是被卸载。当组件实例作为缓存树的一部分插入 DOM 时,它会被激活。
保持活动状态的组件可以使用onActivated()和为这两种状态注册生命周期钩子onDeactivated()

标签:缓存,DOM,活动状态,实例,vue3,组件,动态
From: https://www.cnblogs.com/yihuanhuan/p/16757772.html

相关文章

  • vue3的Async Components异步组件
    前言:当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载;这样的做得目的可以很好的提高用户体验。传统方式引入组件如下,这......
  • 备战2021:vue3+ts开发指南
    Vue3+Typescript开发指南为什么要使用Ts应不应该使用TS开发Vue3是当前的热门话题,大家主要纠结成本和收益之间的取舍。什么是TypeScript官网:构建于JavaScript,增加了静态类......
  • 动态开点线段树
    引入在普通的线段树中,我们一般要开\(4N\)的数组以避免越界。然而,在一些题目中,空间限制并不允许我们这样做。考虑如下问题:有一个长度为\(n\)的数组,初始全部为\(0\)......
  • vue引入组件注释
    组件引入进来分为三步走:①引入组件,②注册组件,③使用组件<template><view><uni-badgetext="abc":inverted="true"></uni-badge><!--3.使用组件--></......
  • vue3中pinia的使用总结
      pinia的简介和优势:Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方,也......
  • ts+vite3+vue3+mock+qs实现本地模拟数据功能
    第一步:安装qs因为项目中用到了ts,所以还需要安装:第二步:安装mock第三步:创建Vue页面:Category.vue<template><button@click="getById">getById</button><button......
  • Vue.js框架:自定义组件全局挂载,避免每个用到的页面需要重复导入问题
    一、打包组件可以建立一个打包工具类,将所有的需要全局挂载的自定义组件进行打包封装,避免main.js过于杂乱。importgbInputfrom'../components/gbInput/gbInput'/......
  • React组件之间的通信方式总结(下)
    一、写一个时钟用react写一个每秒都可以更新一次的时钟importReactfrom'react'importReactDOMfrom'react-dom'functiontick(){letele=<h1>{new......
  • React组件之间的通信方式总结(上)
    先来几个术语:官方我的说法对应代码ReactelementReact元素letelement=<span>A爆了</span>Component组件classAppextendsReact.Component{}无Ap......
  • 【Vue3.x】全局组件、局部组件和递归组件
    全局组件没啥讲的,和vue2一样,常规是src下components文件夹下新建全局组件,然后去入口文件main.ts里注册全局组件。然后就能在全局使用了import{createApp}from'vue'i......