搞明白activated和deactivated

太过爱你忘了你带给我的痛 2022-10-28 04:56 208阅读 0赞

### 文章目录 ###

*   *   *   *  写到前面
             *  什么是activated
             *  activated解决了一个什么问题
             *  Demo
             *   *  main.vue
                 *  assembly1(组件1)
                 *  assembly2(组件2)
             *  执行结果
             *  要点速记
             *  个人建议
             *  写到最后

#### 写到前面 ####

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

#### 什么是activated ####

> 首先要确定一个点就是他也是属于vue生命周期中的一个，为什么我们平常说的生命周期没有它呢？我们平常说的生命周期就是created，update，mounted，destory和他们的之前之后的状态，当我们去查的activated的时候发现没有，但是会在官方的keep-alive中发现他的身影和介绍，知道你们不想找，[点击它吧][Link 1]，说白了就是我们直接切换组件的时候，组件的钩子函数会对应的触发，比如进来的时候出现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>

#### 执行结果 ####

*  第一次运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]
 *  第二次运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]

#### 要点速记 ####

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

#### 个人建议 ####

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

#### 写到最后 ####

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

[Link 1]: https://cn.vuejs.org/v2/api/#keep-alive
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221024/c9c45ec75fab427e9b12f4ca4cc49056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20221024/966212da17e04e8fad29ada427adc535.png