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

Question

저는 Vue3Compositionapi와 Typescript를 사용하여 HammerJS 패키지를 사용하여 핀치 투 줌을 구현하고 있습니다. JavaScript에서 CodePen의 작업 예제를 따르려고 합니다: Vue에 구현된 https://codepen.io/bakho/details/GBzvbB. 그러나 Vue 앱에서 실행하려고 할 때 몇 가지 문제가 발생하고 해결 방법을 잘 모르겠습니다. 다음 오류: //Objectispossously'nu

P粉752826008 · Answer

오류가 발생한 이유는 다음과 같습니다.

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 콘텐츠에 액세스할 수 없습니다.

으아아아