keep-alive和created

当keepalive页面缓存下来的时候，只会调用一次created这个钩子函数，因为已经被缓存下来了，所以我们在created中获取按钮权限的话，tab栏再次进入的话就不会触发created钩子了，created这个钩子就是只有页面渲染的时候会触发，取而代之的是使用我们的activated钩子函数

注意：当keepalive页面缓存下来的时候,如果页面有activated钩子和created钩子函数，这两个函数会被同时触发

#keep-alive

keep-alive是Vue内置的一个组件，可以是被包含的组件保留状态，或避免重新渲染

router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

例如,我们切换tab栏的时候,如果我们想保存组件的状态的话我们可以使用keep-alive

假如我们有两个路由链接,他们分别对应的是不同的组件，相当一个tab栏，下面这两个组件会生命周期发生什么变化？

//某个页面<div><router-link to="/keepalive/about">about</router-link></div><div><router-link to="/keepalive/news">news</router-link></div><router-view></router-view>

当我们点击about链接，about组件会触发created钩子函数,
当我们切换到news链接的时候,about组件会触发destroyed 钩子函数
也就是说我们的组件在tab切换的时候被重新创建和销毁了

当我们使用vue的内置组件keep-alive 包裹我们的路由出口的时候我们会发现组件就被缓存下来不会被销毁了，在我们切换tab的时候，组件不会调用created，只有初次会被调用

 <div><router-link to="/keepalive/about">about</router-link></div><div><router-link to="/keepalive/news">news</router-link></div><keep-alive><router-view></router-view></keep-alive>

当页面被keep-alive缓存下来的时候，vuet提供两个钩子函数

当keepalive页面缓存，有activated钩子和created钩子函数时

这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次
页面被缓存下来的时候，就不会触发destroyed生命钩子

取而代之触发的是deactivated钩子

然后引出我们keep-alive里边的两个属性

include 字符串或正则表达,只有匹配的组件会被缓存
exclude 字符串或正则表达式，任何匹配的组件都不会被缓存

Vue中组件data为什么是一个对象

function showData(){return {name:"小红",}
}let obj = showData()
let obj1 = showData()
let obj2 = showData()obj.name = "小白"
console.log(obj)   //{name: '小白'}
console.log(obj1)  //{name: '小红'}
console.log(obj2)  //{name: '小红'}

因为函数的有自己独立的词法环境，所以函数return的对象是在函数内部词法环境创建的，所以它们彼此之间的数据不会互相影响。组件是要复用的，得保证数据不能互相影响。

如果这个对象不是在函数内部词法环境创建的那么就会造成数据污染

let user = {name:"小红",
}
function showData(){return user
}let obj = showData()
let obj1 = showData()
let obj2 = showData()obj.name = "小白"console.log(obj)   //{name: '小白'}
console.log(obj1)  //{name: '小白'}
console.log(obj2)  //{name: '小白'}

vue中的activated和deactivated相关推荐

vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
ios 销毁当前页面重新开启_利用Vue中keep-alive，快速实现页面缓存
keep-alive 有时候我们不希望组件被重新渲染影响使用体验:或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就可以用到keep-alive组件. 官网 ...
Vue 中 keep-alive 组件与 router-view 组件的那点事
最近项目中有小伙伴找到我,问我"为啥他写的页面第一次进去可以触发 onCreate 函数,第二次再进的时候就不触发了呢?"(因为我们项目是一个大型的项目,每个开发可能只接触到自己开 ...
vue中keepAlive的使用
在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态:vue里提供了keep-alive组件用来缓存状态. 可以用以下几种方 ...
vue中activated和deactivated是什么
activated 和 deactivated 是 Vue.js 中组件生命周期的钩子函数. activated 钩子函数会在组件被激活时调用,比如从一个路由组件切换到另一个路由组件时.在这个钩子函数 ...
vue的activated和deactivated生命周期
<keep-alive>包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中.当组件在 <keep-alive> 内被切换,它的 ac ...
关于Vue中keep-alive的作用是什么？怎么使用？
一.概念: keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,该组件将不会销毁. 二.作用: 用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验. 三. ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...

vue中的activated和deactivated

keep-alive和created

#keep-alive

activated被 keep-alive 缓存的组件激活时调用。

deactivated被 keep-alive 缓存的组件失活时调用。

Vue中组件data为什么是一个对象

vue中的activated和deactivated相关推荐

最新文章

热门文章