搞明白activated和deactivated

文章目录

写到前面

今天简单的将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是不执行的

个人建议

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

写到最后

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