标签：11 缓存 渲染 alive keep 组件 动态 属性

动态组件

实现动态组件渲染

vue提供给一个内置的component组件，专门用来实现动态组件的渲染

  //通过 is 属性，动态指定要渲染的组件
  <component :is="comName"></component>

  //点击按钮，动态切换组件的名称
  <button @click="comName = 'Left'">展示 Left 组件</button>
  <button @click="comName = 'Right'">展示 Right 组件</button>

	data() {
    return {
    	//当前要渲染的组件名称
      comName: 'left'
    }
  }

component标签为vue内置，作用为组件的占位符

is属性的值表示要渲染的组件的名称

is属性的值，应该是组件在components节点下的注册名称

keep-alive

通过component标签动态渲染的组件，在切换时会进行销毁，当切换回来时才重新创建

因此其中的数据并不会保留

此时可以通过keep-alive标签包过进行缓存，保证组件不被销毁

  <keep-alive>
	<component :is="comName"></component>
  </keep-alive>

默认在keep-alive标签内包裹的所有组件都不会销毁

可以通过添加属性进行修改

include

include属性用来指定只有名称匹配的组件会被缓存，多个组件名之间使用英文逗号分隔

  <keep-alive include="MyLeft"> 
  <!-- 此时include中的值为名称匹配的组件，
  当组件export default中没有name属性时include的值为组件注册时的名称，
  当组件export default中有name属性时include的值就必须为name属性的值 -->
	<component :is="comName"></component>
  </keep-alive>

此时只有include中的组件才会被缓存，其他按默认进行销毁创建

exclude

exclude属性用来指定哪些组件不需要被缓存，多个组件名之间使用英文逗号分隔

  <keep-alive exclude="MyRight"> 
  <!-- 此时exclude中的值为名称匹配的组件，
  当组件export default中没有name属性时exclude的值为组件注册时的名称，
  当组件export default中有name属性时exclude的值就必须为name属性的值 -->
	<component :is="comName"></component>
  </keep-alive>

此时只有exclude中的组件不会被缓存，其他按默认进行缓存

注： include与exclude这两个属性不能同时使用

keep-alive对应的生命周期函数

keep-alive会对组件进行缓存及激活，同样具有生命周期函数

当组件被缓存时,会自动触发组件的deactivated生命周期函数

当组件被激活时,会自动触发组件的activated生命周期函数

标签：11,缓存,渲染,alive,keep,组件,动态,属性
来源： https://blog.csdn.net/Raccon_/article/details/122724930

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。