JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
	<p>{{msg}}</p>
</div>

JavaScript

var vm = new Vue({
  data: {
    msg: 'Hello Vus.js'
  },
  beforeCreate() {
    console.log('\nbeforeCreate 被執行');
		console.log('beforeCreate 中無法調用 data 和 methods: msg = ' + this.msg);
  },
  created() {
    console.log('\ncreated 被執行');
		console.log('created 中可調用 data 和 methods: msg = ' + this.msg);
  },
  beforeMount() {
    console.log('\nbeforeMount 被執行');
		console.log('檢查此時的DOM:\n');
		console.log(this.$el.outerHTML);
		console.log('尚未將msg的值渲染到DOM\n\n');
  },
  mounted() {
    console.log('\nmounted 被執行');
		console.log('檢查此時的DOM:\n');
		console.log(this.$el.outerHTML);
		console.log('已經渲將msg的值渲染到DOM\n\n');
  },
  beforeUpdate() {
    console.log('\nbeforeUpdate 被執行');
		console.log('beforeUpdate 中調用 msg = ' + this.msg);
		console.log('檢查此時的DOM:\n');
		console.log(this.$el.outerHTML);
  },
  updated() {
    console.log('\nupdated 被執行');
		console.log('updated 中調用 msg = ' + this.msg);
		console.log('檢查此時的DOM:\n');
		console.log(this.$el.outerHTML);
  },
  beforeDestroy() {
    console.log('\nbeforeDestroy 被執行');
		console.log('此時修改msg仍會觸發update的過程');
		this.msg='change msg to beforeDestroy';
		console.log('msg = ' + this.msg);
  },
  destroyed() {
    console.log('\ndestroyed 被執行');
		console.log('已取消綁定因此修改msg不會觸發update的過程');
  }
});

setTimeout(function() {
	vm.$mount('#app');
}, 3000)

setTimeout(function() {
	vm.$data.msg = 'change msg';
}, 6000)

setTimeout(function() {
	vm.$destroy();
}, 9000)