动态组件、组件缓存-Toy模板网

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

动态组件

多个组件使用一个挂载点，并动态切换，就是动态组件

需求：完成一个注册功能页面，2个按钮，一个填写注册信息，一个填写用户简介信息

步骤

定义两个组件 UserName.vue，UserInfo.vue 2个组件
引入到 App.vue组件中
data中定义变量来存放要显示的组件名
要设置挂载点 <component>，使用 is 属性来设置要显示哪个组件
点击按钮，修改变量里的组件名

App.vue

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码</button>
    <button @click="comName = 'UserInfo'"> 个人信息 </button>
    <p> 下面显示动态切换组件 </p>
    <div style=" border: 1px solid red;">
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
/*
同一个挂载点要切换不同组件  显示
    1. 创建要切换的组件  标签+样式
    2. 引入到要展示的vue文件内，注册
    3. 变量  承载要显示的组件名
    4. 设置挂载点  <component :is="变量"></component>
    5. 点击按钮 切换comName值为要显示的组件名
*/
import UserName from './components/UserName.vue'
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      comName: 'UserName',
    }
  },
  methods: {

  },
  components: {
    UserName,
    UserInfo,
  }
}
</script>

UserName.vue

<template>
    <div>
        <p>用户名：<input type="text"></p>
        <p>密码：<input type="password" name="" id=""></p>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped></style>

UserInfo.vue

<template>
    <div>
        <p>人生格言 个人习惯</p>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped></style>

缺点：要切换的组件很多时，要在根组件引入很多组件

组件动态不常用，组件路由更常用

组件缓存

组件切换会导致组件被频繁的销毁和重新创建，性能不高

使用vue内置的keep-alive组件，可以让包裹的组件保存在内存中不被销毁

演示：给UserName.vue 和 UserInfo.vue 注册created 和 destroyed 生命周期事件，观察创建和销毁的过程

使用 keep-alive 内置的vue组件，让动态组件缓存

语法：

Vue内置的keep-alive组件，包裹要频繁切换的组件

App.vue

    <div style=" border: 1px solid red;">
      <!-- vue内置的keep-alive组件，把包起来的组件缓存起来 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>

补充生命周期

activated 激活时触发

deactivated 失去激活状态触发文章来源地址https://www.toymoban.com/news/detail-499923.html

<template>
    <div>
        <p>用户名：<input type="text"></p>
        <p>密码：<input type="password" name="" id=""></p>
    </div>
</template>

<script>
export default {
    created() {
        console.log('UserName创建');
    },
    destroyed() {
        console.log('UserName销毁');
    },
    // 组件缓存下 多了两个钩子函数
    activated() {
        console.log("activated");
    },
    deactivated() {
        console.log("deactivated");
    }
}
</script>

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