例えば、データリスナーをセットアップする必要があり、テンプレートをコンパイルする必要があり、インスタンスをDOMにマウントする必要があり、データが変更されたときにDOMを更新する必要があります。また、このプロセス中に実行されるライフサイクルフックと呼ばれる関数があり、ユーザーはさまざまな段階で独自のコードを追加することができます。
その中でも、created、mounted、updated、destroyがよく使われます。<keep-alive></keep-alive>一方、activatedとdeactivatedという2つのフック関数があり、これらは.NET Frameworkと一緒に使う必要があります。
コンポーネントのライフサイクルは、生成から破棄までのプロセスを経ることになりますが、このプロセスは非常にパフォーマンスを消費します。
<style>
.active {
color: red;
}
</style>
<body>
<div id="app">
<App></App>
</div>
<script src="https://..////.js"></>
<script>
Vue.component('Test', {
data() {
return {
msg: 'Tom',
isActive: false
}
},
methods: {
handleClick() {
this.msg = 'Jerry';
this.isActive = true;
}
},
template: `
<div>
<button @click='handleClick'> </button>
<h3 :class='{active:isActive}'>{{ msg }}</h3>
</div>
`,
beforeCreate() {
console.log('コンポーネントの作成', this.$data);
},
created() {
//ここでは、バックエンドからデータを要求するajaxを送信する
console.log('コンポーネント作成完了', this.$data);
},
beforeMount() {
//今後のマウント
console.log('DOM ', document.getElementById('app'));
},
mounted() {
//要件によっては、ここでajaxを送信することも可能である。
console.log('DOMマウント完了', document.getElementById('app'));
},
beforeUpdate() {
//更新されたDOMを取得する
console.log('更新されたDOM', document.getElementById('app').innerHTML);
},
updated() {
//更新されたDOMを取得する
console.log('更新されたDOM', document.getElementById('app').innerHTML);
},
beforeDestroy() {
console.log(' ');
},
destroyed() {
console.log('破壊が完了する');
},
activated() {
console.log('コンポーネントが活性化される');
},
deactivated() {
console.log('コンポーネントが非アクティブになる');
},
})
const App = {
data() {
return {
isShow: true
}
},
methods: {
clickHandle() {
this.isShow = !this.isShow;
}
},
template: `
<div>
<keep-alive>
<Test v-if='isShow'></Test>
</keep-alive>
<button @click='clickHandle'>生と死を変える</button>
</div>
`
}
new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
