The article directories

        • In front of the written
        • What is activated
        • What problem does Activated solve
        • Demo
          • main.vue
          • Assembly1 (part 1)
          • Assembly2 (component 2)
        • The execution result
        • The main points of shorthand
        • Personal advice
        • Wrote last

In front of the written

Today, I’m going to talk about activated in a simple way. Some people have asked about activated in the past, but some people still don’t understand it very well.

What is activated

The first thing to make sure is that it is also part of the VUE life cycle. Why is it not part of the life cycle? The life cycle we usually talk about is created, Update, Mounted, destory and their state before and after. When we check check activated, we will find its figure and introduction in the official Keep-alive. I know you don’t want to find it, click it. In other words, when we switch the component directly, the hook function of the component will be triggered accordingly. For example, created is displayed when entering the component, and destory is displayed when leaving the component. Therefore, when we use cache (i.e. keep-alive), our normal hook function cannot be executed. That’s when activated and deactivated are activated.

What problem does Activated solve

Now that gave him a place on the document, he certainly is necessary, we assume that a situation, we do a project, a function is the reference data of the components, this time every time we need to go in all the latest values to pass in the past, update, we have several kinds of methods, is currently the three, In the first way, we directly take the data as the parameter to transfer the parent-child data. In the second way, we use the value of VUEX state management to manage the global one state, which can also be realized. In the third way, we cache the components and use keep-alive, but the data will not be updated after passing. Created and Mounted do not execute. That’s when we can use activated to update our data!

Demo

main.vue
<template> <div> <button @click="currAssembly('one')"> </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>Copy the code
Assembly1 (part 1)
<template> <div> <h2> {{msg}} </h2> </div> </template> <script> export default { data() { return { msg: }, mounted() {console.info() {console.info() {console.info() {console.info() {console.info() {console.info(); }, activated() {console.info(' I am component 1, Deactivated () {console.info(' I am component 1 and my deactivated hook is executed ')}} </script> <style> </style>Copy the code
Assembly2 (component 2)
<template> <div> <h2> {{msg}} </h2> </div> </template> <script> export default { data() { return { msg: }, mounted() {console.info() {console.info() {console.info() {console.info() {console.info() {console.info(); }, activated() {console.info(' I am component 2, Deactivated () {console.info(' I am component 2 and my deactivated hook is executed ')}} </script> <style> </style>Copy the code

The execution result

  • First run

  • Second run

The main points of shorthand

  • Activated and deactivated are used together with keep-alive
  • Activated and deactivated are not triggered when keep-alive is not present
  • If keep-alive exists, activated can be used as created
  • Deactivated is triggered when a component is destroyed, and destory is not executed

Personal advice

Will above a few kinds of circumstance oneself imitate look, can understand!

Wrote last

Believe in this case you should be able to directly understand what’s going on, I don’t talk nonsense, this thing I thought for a moment, would you like to write an article, but, I think I want to before is wrong, I always thought that as long as it is I personally feel very simple, I think you can, so I won’t go to write a blog, a lot of time Later, I found that there were many things that I had not met with you, which made me think that you had also met with you. Therefore, this misunderstanding directly led me to rarely update my blog, and I will try to update more content in the future.