Vue 3 構成 API - 空の可能性のあるオブジェクト

Question

私は、Vue 3 Comboposition api と Typescript を使用して、HammerJS パッケージを使用してピンチズームを実装しています。

私は、JavaScript で書かれた CodePen の動作例に従おうとしています: https://codepen.io/bakho/details/GBzvbB は Vue で実装されています。

ただし、Vue アプリで実行しようとしたときにいくつかの問題が発生し、修正方法がわかりません。

次のエラー:

リーリー

これは完全なソース コードです:

リーリー

何が問題なのか、そしてそれがなぜこの問題を引き起こすのか誰か教えてください。 オブジェクトは "null" である可能性があります

Answer 1

これがこのエラーの理由です:

• const imageContainer = ref(null) -> 値を null に設定すると、オブジェクトのプロパティにアクセスするとエラーがスローされる可能性があると TypeScript が警告します。初期値は null で、テンプレート内で ref を使用しようとしているため、要素が存在する場合と存在しない場合があります。

• const imageContainer = document.querySelector('.imageContainer') -> HTML 要素の有無をクエリしているため、null## も取得できることになります。 # を値として指定すると、TypeScript はオブジェクトのプロパティにアクセスするとエラーがスローされる可能性があることを再度警告します

＃＃＃解決：＃＃＃

実際に

setup

関数から
• setup 変数を返す必要があります。これにより、Vue はそれをテンプレート内の ref にバインドし、 # で使用できるようにします。 ##onMounted 変数は ref であるため、関数内でアクセスされます。これは、変数が DOM にマウントされていないことを意味します。 setup は、Vue.js コンポーネントのライフサイクルの created フックと mounted フックの前に呼び出されます。これらのフック内の DOM コンテンツにはアクセスできません。 リーリー