JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app" :style="{ color: 'red' }">
  <button @click="user += '!'">
    Change
  </button>
  <child-component :author="track(user)"></child-component>
  Text
</div>

JavaScript

const ChildComponent = {
  template: `<button>{{ format(author) }}</button>`,
  props: ['author'],

  beforeUpdate () {
    console.log('beforeUpdate')
    //debugger
  },

  updated () {
    console.log('updated')
  },

  methods: {
    format (author) {
      console.log('in format')
      return author
    }
  },

  watch: {
    author: [
      {
        flush: 'pre',
        handler () {
          // debugger
          console.log('pre - author changed')
        }
      }, {
        flush: 'post',
        handler () {
          console.log('post - author changed')
        }
      }

    ]
  }
}

const HelloWorld = {
  components: {
    ChildComponent
  },
  
  data () {
    return {
      user: 'Mary'
    }
  },
  
  beforeMount () {
    console.log('parent beforeMount')
  },
  
  beforeUpdate () {
    debugger
    console.log('parent beforeUpdate')
  },
  
  updated () {
    console.log('parent updated')
  },
  
  methods: {
    track (user) {
      console.log('track called')
      return user
    }
  },
  
  watch: {
  	user: [
      {
        flush: 'pre',

        handler () {
          console.log('pre - user changed')
        }
      }, {
        flush: 'post',

        handler () {
          console.log('post - user changed')
        }
      }
    ]
  }
}

const app = Vue.createApp(HelloWorld)
// debugger
const vm = app.mount('#app')

// console.log(vm.$el)