uniapp の初期化をどこに置くか

Uniapp での開発プロセスでは、this キーワードをさまざまな場所で使用します。たとえば、methods メソッドで定義された関数内では、これは Vue インスタンスを指します。ただし、コンポーネントの作成およびマウントされたライフサイクル関数では、これはコンポーネント自体を指します。では、Uniapp でこのキーワードを正しく使用するにはどうすればよいでしょうか?特に初期化の場合、これをどこに配置すればよいでしょうか？

まず、Uniapp の初期化プロセスを見てみましょう。新しい Uniapp プロジェクトを作成すると、システムはデフォルトの main.js ファイルを自動的に生成します。このファイルには、次のコードがあります。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  ...App
})
app.$mount()

ご覧のとおり、このファイルでは、import ステートメントを通じて Vue コンポーネントと App コンポーネントを導入し、Vue インスタンス アプリを作成しました。この例では、Vue が自動的に現在の Vue インスタンスを指すようにするため、 this キーワードを手動でバインドしませんでした。

コンポーネントを作成するときは、this キーワードを直接使用して、Vue インスタンス上のデータやメソッドにアクセスすることもできます。たとえば、コンポーネントのメソッド メソッドでは、次のように Vue インスタンスのデータにアクセスできます。

methods: {
  handleClick() {
    console.log(this.title)
  }
}

This.title ここで、Vue インスタンスの title 属性を指します。

次に、このキーワードがコンポーネントの作成およびマウントされたライフサイクル関数でどのように使用されるかを見てみましょう。

コンポーネントの作成されたライフサイクル関数では、いくつかのコンポーネントの初期化操作を実行できます。たとえば、ここでバックグラウンド インターフェイスを呼び出してデータを取得し、それらをコンポーネントのデータ属性に割り当ててコンポーネントをレンダリングできます。ここで、これは現在のコンポーネント インスタンスを指します。例:

created() {
  this.getData()
},
methods: {
  async getData() {
    const res = await this.$http.get('/api/data')
    this.list = res.data
  }
}

ここの this.$http.get メソッドは、Uniapp の組み込みメソッドであり、ネットワーク リクエストを開始するために使用されます。バックグラウンドから返されたデータをコンポーネントの list 属性に割り当てます。データは、{{list}} を通じてコン​​ポーネントのテンプレートに表示できます。

コンポーネントのマウントされたライフサイクル関数では、レンダリングされた DOM 要素にアクセスできます。ここでは、これは現在のコンポーネント インスタンスも指します。たとえば、ここで要素の幅と高さを取得し、データを更新できます。例:

mounted() {
  const element = this.$refs.container
  const width = element.offsetWidth
  const height = element.offsetHeight
  this.width = width
  this.height = height
}

This.$refs.container ここで、参照がアクセス コンポーネント内のコンテナである要素ノードです。要素の幅と高さを取得し、それらをコンポーネントの幅と高さのプロパティに割り当てます。

要約すると、Uniapp の this キーワードは通常、特定の使用シナリオに従って使用できる現在の Vue インスタンスまたはコンポーネント インスタンスを指します。コンポーネントの作成およびマウントされたライフサイクル関数でこれを使用することにも問題はありませんが、これはコンポーネント インスタンスを指すことに注意してください。

初期化をどこに配置するかについては、コンポーネントの作成されたライフサイクル関数に配置することも、Vue インスタンスの作成されたライフサイクル関数に配置することもできます。具体的な決定は実際のニーズに基づいて行うことができます。

以上がuniapp の初期化をどこに置くかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。