vue中的activated和deactivated

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提供两个钩子函数

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

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

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

   这两个函数会被同时触发，此时应该使用activated代替created，因为created只会触发一次

2. 页面被缓存下来的时候，就不会触发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: '小白'}