const child = {
  template:`
  <div>
    <h4>{{ text }}</h4>
    <input type="text" class="form-control" v-model="text">
  </div>
  `,
  data: function () {
    return {
      text: 'Vue data 資料狀態'
    }
  },
  beforeCreate() {
    console.log(`beforeCreate! ${this.text}`);
  },
  created() {
    console.log(`created! ${this.text}`);
    alert(`created! ${this.text}`);
  },
  beforeMount() {
    alert(`beforeMount! ${this.text}`);
  },
  mounted() {
    alert(`mounted! ${this.text}`);
  },
  updated () {
    console.log(`updated! ${this.text}`);
  },
  activated () {
    alert(`activated! ${this.text}`);
  },
  deactivated () {
    alert(`deactivated! ${this.text}`);
  },
  beforeUnmount() {
    console.log(`beforeUnmount! ${this.text}`);
  },
  unmounted() {
    console.log(`unmounted! ${this.text}`);
  }
};
const App = {
  data() {
    return {
      isShowing: false
    }
  }
};
Vue.createApp(App).component('child',child).mount('#app');