Vue 3 Composition API - 잠재적으로 비어 있는 객체

Question

저는 Vue 3 Composition api 및 Typescript를 사용하여 HammerJS 패키지를 사용하여 핀치 투 줌을 구현했습니다.

저는 JavaScript로 작성된 CodePen의 작업 예제를 따르려고 합니다: https://codepen.io/bakho/details/GBzvbB가 Vue에 구현되었습니다.

그러나 Vue 앱에서 실행하려고 할 때 몇 가지 문제가 발생했는데 어떻게 해결해야 할지 모르겠습니다.

다음 오류:

으아아아

전체 소스 코드는 다음과 같습니다.

으아아아

무슨 문제가 있고 왜 이런 일이 발생하는지 알려줄 수 있는 사람이 있나요? Object 可能为“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 콘텐츠에 액세스할 수 없습니다.

으아아아