CODEWITHSUNDEEP
vue.js
Edward Tanguay
Edward Tanguay

Reputation: 193402

Why does vue.js execution not fire beforeUpdate, updated, and activated events?

What does this vue.js code execute:

but not:

https://jsfiddle.net/edwardtanguay/3hkdbuke

var vm = new Vue({
    el: '#app',
  data: function() {
    return {
        message: 'This is a test.'
    }
  },
  methods: {
    changeText: function() {
        this.message = 'changed'; 
    }
  },
  beforeCreate: function() {
    this.$nextTick(() => {
        console.log('in beforeCreate'); // gets here
    });
  },
  created: function() {
    this.$nextTick(() => {
        console.log('in created'); // gets here
    });
  },
  mounted: function() {
    this.$nextTick(() => {
        console.log('in mounted'); // gets here
    });
  },
  beforeUpdate: function() {
    this.$nextTick(() => {
        console.log('in beforeUpdate'); //DOESN'T GET HERE
    });
  },
  updated: function() {
    this.$nextTick(() => {
        console.log('in updated'); //DOESN'T GET HERE
    });
  },
  activated: function() {
    this.$nextTick(() => {
        console.log('in activated'); //DOESN'T GET HERE
    });
  }
});

Upvotes: 3

Views: 7228

Answers (2)

thanksd
thanksd

Reputation: 55664

The beforeUpdate and updated events will fire after the component has been updated, but not on initialization.

The activated event will fire if a component is nested inside of the keep-alive tag.

See the lifecycle diagram.

Here's an example:

Vue.component('child', {
  template: '<div>I am a child</div>',
  activated: function() {
    this.$nextTick(() => {
        console.log('in activated');
    });
  }
})

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'This is a test.'
    }
  },
  methods: {
    changeText: function() {
      this.message = 'changed';
    }
  },
  beforeCreate: function() {
    this.$nextTick(() => {
      console.log('in beforeCreate');
    });
  },
  created: function() {
    this.$nextTick(() => {
      console.log('in created');
    });
  },
  mounted: function() {
    this.$nextTick(() => {
      console.log('in mounted');
    });
  },
  beforeUpdate: function() {
    this.$nextTick(() => {
      console.log('in beforeUpdate');
    });
  },
  updated: function() {
    this.$nextTick(() => {
      console.log('in updated');
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <keep-alive>
    <child></child>
  </keep-alive>
  
  <div>
    Message: <i>{{message}}</i>
  </div>    

  <button @click="message = 'updated'">
    Update
  </button>
</div>

Upvotes: 2

divine
divine

Reputation: 4912

The lifecycle events updated() and beforeUpdated() will execute only when component is re-rendered

i have introduced a new variable counter in your example

data: function() {
    return {
        message: 'This is a test.',
      counter : 0
    }
  }

A button is introduced to update the counter variable. When the button is clicked counter variable is updated which in-turn will re-render the component thereby triggering the beforeUpdate() and updated() lifecycle events

<div id="app">
    <div>
        Message: <i>{{message}}</i>
    </div>
    <div>
        counter is {{counter}}
    </div>
    <div>
        <button @click="counter = counter+1">increase</button>
    </div>
</div>

i haven't come across activated() event. May be someone could help

Upvotes: 0

Related Questions