zoukankan      html  css  js  c++  java
  • vuejs 的keepalive和页面之间数据传递的更改刷新

    关于keep-alive的文章已经很多了,简单来说就是为了减少页面切换间频繁的重新加载问题。

    在实际开发过程中,我们需要部分页面能够按照我们的需求进行刷新,通过选择设置keep-alive等,这些方案也很多。

    但是个人感觉非常麻烦,而且,一般情况下通过路由传递参数进行刷新页面,因此,我个人认为完全可以全部使用keep-alive(按照官方文档而言,这个并没有在父级dom下进行渲染,应该不会有性能问题,可能不全面,希望有同学指正)

    疑问点:网上大家都使用判断组件是否缓存的方式来做,vuejs官方给出的案例中,也提供了判断是否缓存组件匹配函数,因此,无法确定,每个组件都“主要用于保留组件状态或避免重新渲染。”这个做法是否好。

     在vue中提供了钩子进行使用,对于keep-alive组件,激活时activated会被触发,除了第一次进入created被触发,后面都不会被触发,

    因此,我们可以使用activated中进行参数获取来进行页面刷新。

    例如:

    export default {
      name: 'Buy',
      data () {
        return {
          parPrice:0,
          price:0
        }
      },
      created(){
        //this.getParams()
      },
      activated(){
        this.getParams()
      },
      components:{
        'v-header':IHeader
      },
      methods:{
        getParams(){
          let {parPrice,price} = this.$route.params
          if(typeof parPrice !== 'number')
            return
          this.parPrice = parPrice
          this.price = price
        }
      }
    }
    

      

  • 相关阅读:
    Linux学习
    PHP语法笔记
    iOS二次发育(swift)闭包
    iOS二次发育(swift)类
    iOS二次发育(swift)结构体
    iOS二次发育(swift)枚举
    【NOIP2013模拟联考14】隐藏指令
    【NOIP2012模拟8.9】逐个击破
    NOIP2020.9.19模拟patrick
    NOIP2020.9.19模拟 spongebob
  • 原文地址:https://www.cnblogs.com/hodgson/p/9242381.html
Copyright © 2011-2022 走看看