beforeUpdate Demo

by Rahul Kadyan

HTML

<script src="//unpkg.com/vue"></script>
<div id="app"></div>
<div id="console"></div>

JavaScript

const c = document.querySelector('#console')
const log = (message, data) => {
	c.innerHTML += message + ' ' + (data ? JSON.stringify(data) : '') + '<br>'
}

const Print = {
  props: ['value'],
  beforeUpdate () {
    log('Print:render', this.$props)
  },
  created () {
    log('Print:created', this.$props)
  },
  template: `<span>{{value}}</span>`
}

const Sum = {
  props: ['a', 'b'],
  beforeUpdate() {
		log('Sum:render', this.$props)
  },
  created () {
		log('Sum:crated', this.$props)
  },
  template: `
    <span>
      <Print :value=a /> + <Print :value=b /> = <Print :value="a + b" />
    </span>
  `,
  components: { Print }
}

const Func = {
  props: ['param1', 'param2'],
  beforeUpdate() {
    log('Func:render', this.$props)
  },
  created () {
    log('Func:created', this.$props)
  },
  template: `
    <span>
    Sum(
      <Print :value=param1 />,
      <Print :value=param2 />
    )
    </span>
  `,
  components: { Print }
}

new Vue({
  el: '#app',
  data: () => ({ a: 2, b: 4 }),
  mounted() {
    setTimeout(() => {
      log('================')
      this.a = 3
    }, 3000)
  },
  beforeUpdate() {
    log('App:render', this.$data)
  },
  created () {
    log('App:created', this.$data)
  },
  components: { Func, Sum },
  template: `
    <span>
      <Func param1='a' param2='b' /> :: <Sum :a=a :b=b />
    </span>
  `
})