写到前面

今天简单的将activated讲一下，前面有人问了，既然有问的，说明还有人不是很明白的，这里就说一下吧！

什么是activated

首先要确定一个点就是他也是属于vue生命周期中的一个，为什么我们平常说的生命周期没有它呢？我们平常说的生命周期就是created，update，mounted，destory和他们的之前之后的状态，当我们去查的activated的时候发现没有，但是会在官方的keep-alive中发现他的身影和介绍，知道你们不想找，点击它吧，说白了就是我们直接切换组件的时候，组件的钩子函数会对应的触发，比如进来的时候出现created，离开的时候出现destory这样的，那么当我们使用缓存的时候，也就是keep-alive的时候，我们正常的钩子函数就没办法执行了，这个时候activated和deactivated就会执行。

activated解决了一个什么问题

既然在文档上给他一席之地，说明他肯定是由自己存在的必要的，我们假设一种情况，我们做一个项目的时候，一个功能是引用了组件中的数据，这个时候我们需要每次进去的时候都最新的值给传递过去，更新掉，我们有几种办法，目前是三种，第一种是我们直接将数据作为参数，进行父子数据的传递，第二种办法是使用vuex状态管理这个值，进行全局一个状态管理，也是可以实现的，第三种就是我们将组件缓存，使用keep-alive，但是数据传递过去不会更新，因为created和mounted不执行，怎么办呢？这个时候就可以使用我们的activated进行更新我们的数据！

Demo

main.vue

<template><div><button @click="currAssembly('one')">组件1</button><button @click="currAssembly('two')">组件2</button><transition><keep-alive><component :is="isCurr"></component></keep-alive></transition></div>
</template><script>import AssemblyOne from '../components/assembly1.vue'import AssemblyTwo from '../components/assembly2.vue'export default {components: {AssemblyOne,AssemblyTwo},data() {return {isCurr: 'AssemblyOne'}},methods: {currAssembly(flg) {if (flg === 'one') {this.isCurr = 'AssemblyOne'} else {this.isCurr = 'AssemblyTwo'}}}}
</script>
<style>
</style>

assembly1(组件1)

<template><div><h2>{{msg}}</h2></div>
</template><script>export default {data() {return {msg: 'this is assembly One'}},created() {console.info('我是组件1，此时我的created钩子已经被执行了')},mounted() {console.info('我是组件1，此时我的mounted钩子已经被执行了')},activated() {console.info('我是组件1，此时我的activated钩子已经被执行了')},deactivated() {console.info('我是组件1，此时我的deactivated钩子已经被执行了')}}
</script>
<style>
</style>

assembly2(组件2)

<template><div><h2>{{msg}}</h2></div>
</template><script>export default {data() {return {msg: 'this is assembly Two'}},created() {console.info('我是组件2，此时我的created钩子已经被执行了')},mounted() {console.info('我是组件2，此时我的mounted钩子已经被执行了')},activated() {console.info('我是组件2，此时我的activated钩子已经被执行了')},deactivated() {console.info('我是组件2，此时我的deactivated钩子已经被执行了')}}
</script>
<style>
</style>

执行结果

• 第一次运行
  
• 第二次运行
  

要点速记

• activated和deactivated是配合keep-alive一起使用的
• activated和deactivated没有keep-alive的时候是不会被触发的
• 在存在keep-alive的时候可以将activated当作created进行使用
• deactivated是组件销毁的时候触发，此时的destory是不执行的

个人建议

将上面的几种情况自己模拟看一下，就会明白了！

写到最后

相信这个例子你们应该可以直接明白怎么回事了，我也不废话了，这个东西我想了一下要不要写一篇文章出来，但是呢，我觉得我之前想的都是错的，我一直认为只要是我个人觉得很简单的，我觉得你们都会了，所以很多时候我都不会去写博客，后来发现很多东西可能我遇到了你们没有遇到，让我觉得你们也遇到过，所以这个误会直接导致我很少更新博客了，以后尽量更新多一些内容。