Vue3 と Vue2 の違い: より豊富なライフサイクル フック

Vue3 と Vue2 の違い: 豊富なライフサイクル フック

Vue は、インタラクティブな Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue2 は Vue.js の安定バージョンであり、Vue3 は Vue.js の最新バージョンです。 Vue3 では多くの改善が行われており、その 1 つはライフサイクル フックの充実です。この記事では、Vue3 と Vue2 のライフサイクル フックの違いを紹介し、コード例を通じてそれらを示します。

Vue2 ライフ サイクル フック
Vue2 には、使用できる 8 つのライフ サイクル フックがあります。

1. beforeCreate: インスタンスが作成される前に呼び出されます。
2. created: インスタンスの作成後、マウントされる前に呼び出されます。
3. beforeMount: DOM がマウントされる前に呼び出されます。
4. mounted: DOM がマウントされた後に呼び出されます。
5. beforeUpdate: コンポーネントが更新される前に呼び出されます。
6. updated: コンポーネントが更新された後に呼び出されます。
7. beforeDestroy: インスタンスが破棄される前に呼び出されます。
8. destroyed: インスタンスが破棄された後に呼び出されます。

これらのフックは、インスタンスの作成後に初期化設定を実行したり、DOM がマウントされた後破棄する前にいくつかのクリーニング操作を実行したりするなど、さまざまな段階で対応する操作を実行するのに役立ちます。

Vue3 ライフ サイクル フック
Vue3 では、合計 10 個の新しいライフ サイクル フックが導入されています。

1. beforeCreate: Vue2 と同じで、インスタンスが作成される前に呼び出されます。
2. created: Vue2 と同じで、インスタンスの作成後、マウント前に呼び出されます。
3. beforeMount: Vue2 と同じで、DOM がマウントされる前に呼び出されます。
4. mounted: Vue2 と同じで、DOM がマウントされた後に呼び出されます。
5. beforeUpdate: Vue2 と同じで、コンポーネントが更新される前に呼び出されます。
6. updated: Vue2 と同じで、コンポーネントが更新された後に呼び出されます。
7. beforeUnmount: コンポーネントがアンマウントされる前に呼び出されます。
8. unmounted: コンポーネントがアンマウントされた後に呼び出されます。
9. beforeDeactivate: コンポーネントが切り替わる前に呼び出されます。
10. deactivated: コンポーネントが切り替わった後に呼び出されます。

新しいライフサイクル フックにより、コンポーネントのさまざまな段階をより適切に制御できるようになります。

コード例
簡単なコード例を通じて、Vue3 と Vue2 のライフサイクル フックの違いを示します。

Vue2 例:

Vue.component('my-component', {
  beforeCreate: function () {
    console.log('beforeCreate hook in Vue2');
  },
  created: function () {
    console.log('created hook in Vue2');
  },
  beforeMount: function () {
    console.log('beforeMount hook in Vue2');
  },
  mounted: function () {
    console.log('mounted hook in Vue2');
  },
  beforeUpdate: function () {
    console.log('beforeUpdate hook in Vue2');
  },
  updated: function () {
    console.log('updated hook in Vue2');
  },
  beforeDestroy: function () {
    console.log('beforeDestroy hook in Vue2');
  },
  destroyed: function () {
    console.log('destroyed hook in Vue2');
  },
  template: '<div>My Component</div>'
});

new Vue({
  el: '#app'
});

Vue3 例:

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate hook in Vue3');
  },
  created() {
    console.log('created hook in Vue3');
  },
  beforeMount() {
    console.log('beforeMount hook in Vue3');
  },
  mounted() {
    console.log('mounted hook in Vue3');
  },
  beforeUpdate() {
    console.log('beforeUpdate hook in Vue3');
  },
  updated() {
    console.log('updated hook in Vue3');
  },
  beforeUnmount() {
    console.log('beforeUnmount hook in Vue3');
  },
  unmounted() {
    console.log('unmounted hook in Vue3');
  },
  beforeDeactivate() {
    console.log('beforeDeactivate hook in Vue3');
  },
  deactivated() {
    console.log('deactivated hook in Vue3');
  },
  template: '<div>My Component</div>'
});

app.mount('#app');

Vue3 では、Vue.createApp() メソッドを使用してアプリケーション インスタンスを作成し、app.mount() メソッドを使用してマウントすることに注意してください。アプリケーションを DOM 要素に適用します。

上記のコード例を実行すると、コンソールにさまざまなライフサイクル フックのログが出力され、ライフサイクル フックに関する Vue3 と Vue2 の違いが表示されます。

結論
Vue3 では、Vue2 と比較してより豊富なライフサイクル フックが導入されており、さまざまな段階でコンポーネントの動作をより適切に制御できるようになります。これらのライフサイクル フックの改善により、Vue アプリケーションの開発と保守がより便利かつ柔軟になりました。この記事のコード例と説明が、Vue3 と Vue2 のライフサイクル フックを理解するのに役立つことを願っています。

以上がVue3 と Vue2 の違い: より豊富なライフサイクル フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。