zoukankan      html  css  js  c++  java
  • vue keepalive 组件切换echarts不显示

    问题描述:

    最近开发 H5+ APP ,首页是两个echarts的折线图,由于项目应用了 keep-alive ,导致这个组件在显示的时候,有时候并不会走 mounted 函数,而且在切换到其他页面,再切换回来的时候,这个折线图是不显示的

    解决方案:

     

     第一个问题是有时候进入页面并不会调用 mounted 函数,解决方案是把数据加载放到 activated 函数中

    因为 keep-alive 会缓存页面,所以页面在重新进入时,不会重新加载,所以不会执行 mounted 函数,但是只要是这个页面被激活,就一定会执行 activated 方法,所以在 activated 方法中判断数据是否已经存在,如果不存在就调用后台接口加载数据

    第二个问题是页面切换回来时,echarts有数据也不显示,那么让 echarts 组件在离开时删除,页面激活时再重新渲染 echarts 组件即可

    这里只需要应用 v-if 这个属性的特性,当值为true时渲染组件,值为false时删除组件,而这个删除组件的时机就是页面离开时,也就是 deactivated ,重新渲染的时机就是页面激活时,也就是 activated 

  • 相关阅读:
    c++错误崩溃3
    c++崩溃错误2
    c++多线程崩溃错误1
    MySQL UNSIGNED
    2PC和3PC
    proxy-target-class="false"与proxy-target-class="true"区别
    Spring MVC processing flow
    Spring中自动装配的模式
    Spring中BeanFactory和ApplicationContext的区别
    什么是Spring
  • 原文地址:https://www.cnblogs.com/LcxSummer/p/15687069.html
Copyright © 2011-2022 走看看