当前位置: 代码迷 >> 综合 >> nextTick、keep-alive
  详细解决方案

nextTick、keep-alive

热度:73   发布时间:2024-01-27 06:02:58.0
nextTick

当我们在使用一些插件的时候,经常需要在dom更新完成后进行必要操作,但是在vue中提供的api只有updated钩子函数,而在这个函数里,任意数据的变化导致的dom更新完成都会触发,所以很可能会造成无关数据的影响,而使用监听的话只能监听到数据的变化,此时dom还没有更新,我们只能强行使用setTimeout来处理

这里推荐大家使用nextTick全局方法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

eq:
getBillBoards(){
axios.get(this.$root.config.host+‘mz/v4/api/billboard/home’,{
params:{__t:Date.now()}
}).then(res => {
console.log(res.data.data.billboards)
this.billboards = res.data.data.billboards

    //当数据更新,dom循环完成后,执行回调Vue.nextTick(function () {new Swiper('.app-home-banner',{loop:true}) })
})

}

keep-alive

在component组件、router-view外面包裹上keep-alive的话,就会对组件进行缓存,当切换回来的时候,组件会立即渲染,理论来说,切换组件的时候其实会把上一个组件销毁,使用了keep-alive则不会

设置include、exclude属性控制有选择的缓存

include匹配到的组件会被缓存,exclude匹配到的不会被缓存

值可以为逗号隔开的字符串include = ‘a,b’;正则:include = ‘/a|b/’;数组:include=[‘a’,‘b’]

使用keep-alive缓存的组件连带它的子组件们都会拥有activated、deactivated钩子函数,会在切换回来和要切换出去的时候触发

比如,main做了缓存,但是main的banner我们希望每次都去重新获取数据,所以就在banner的activated里获取数据

  相关解决方案