Vue Lifecycle Hook

by yejin_yang

HTML

<div id="app">
  <div>
      this is textContent
      <p ref="dom">
        {{this.counter}}
      </p>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data() {
    return {
			count: 10,
      counter: 0,
    }
  },
  beforeCreate: function () {
    console.log('Nothing gets called at this moment')
    // `this` points to the view model instance
    console.log('count is ' + this.count); // undefined
  }, 
  created: function () {
    // `this` points to the view model instance
    console.log('count is: ' + this.count) // 10
    setInterval(() => {
    	this.counter++
    }, 1000)
  }, 
  beforeMount(){
  	console.log('---beforeMount---');
  	console.log(this.$el.textContent);
  },
  mounted(){
    console.log('---Mount---');
  	console.log(this.$el.textContent); // this is textContent
  },
  beforeUpdate(){
   		console.log(+this.$refs['dom'].textContent === this.counter); // false
  },
  updated(){
		console.log(+this.$refs['dom'].textContent === this.counter); // true
  },
})