이 기사에서는 Vue3 제품군 버킷 개발 시 몇 가지 일반적인 문제를 공유하여 함정과 지뢰밭을 피할 수 있기를 바랍니다.
저는 최근 Vue3를 사용하기 시작했고 3개의 프로젝트를 완료했습니다. 오늘은 이를 정리하고 15가지 일반적인 문제를 공유하겠습니다. 기본적으로 해당 문서 주소가 게시되어 있습니다. 더 주세요 문서 보세요~ 완성된 3개의 프로젝트는 기본적으로 Vue3(설정 스크립트 모드)를 사용하여 개발되었으므로 주로 여러 측면으로 요약됩니다.
2. 스크립트 설정 모드에서 상위 구성 요소는 하위 구성 요소
v3.cn.vuejs.org/api/sfc-scr…
script-srtup模式，所以都是直接使用 Vue3.x 的生命周期函数：
// 子组件\
<script setup>\
let name = ref("pingan8787")\
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取\
</script>\
\
// 父组件\
<Chlid ref="child"></Chlid>\
<script setup>\
let child = ref(null)\
child.value.name //获取子组件中 name 的值为 pingan8787\
</script>로그인 후 복사
每个钩子的执行时机点，也可以看看文档：v3.cn.vuejs.org/guide/insta…
2. script-setup 模式中父组件获取子组件的数据
文档地址：v3.cn.vuejs.org/api/sfc-scr…
这里主要介绍父组件如何去获取子组件内部定义的变量，关于父子组件通信，可以看文档介绍比较详细：v3.cn.vuejs.org/guide/compo…
我们可以使用全局编译器宏的defineExpose宏，将子组件中需要暴露给父组件获取的参数，通过 {key: vlaue}方式作为参数即可，父组件通过模版 ref 方式获取子组件实例，就能获取到对应值：
<script setup>\
let props = defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>();\
</script>로그인 후 복사
注意：
- 全局编译器宏只能在 script-setup 模式下使用；
- script-setup 模式下，使用宏时无需
import可以直接使用； - script-setup 模式一共提供了 4 个宏，包括：defineProps、defineEmits、defineExpose、withDefaults。
3. 为 props 提供默认值
definedProps 文档：v3.cn.vuejs.org/api/sfc-scr… 文档：v3.cn.vuejs.org/api/sfc-scr…
前面介绍 script-setup 模式提供的 4 个全局编译器宏，还没有详细介绍，这一节介绍 defineProps和 withDefaults。使用 defineProps宏可以用来定义组件的入参，使用如下：
<script setup>\
let props = withDefaults(\
defineProps<{\
schema: AttrsValueObject;\
modelValue: any;\
}>(),\
{\
schema: [],\
modelValue: ''\
}\
);\
</script>로그인 후 복사
这里只定义props属性中的 schema和 modelValue两个属性的类型， defineProps 여기서는 상위 구성 요소가 하위 구성 요소 내에 정의된 변수를 얻는 방법을 주로 소개합니다. 상위 구성 요소와 하위 구성 요소 간의 통신에 대한 자세한 내용은 v3.cn.vuejs.org/guide/compo…
전역 컴파일러 매크로< code>defineExpose 매크로를 사용할 수 있으며, 상위 구성 요소에 노출되어야 하는 하위 구성 요소의 매개 변수는 {key: vlaue}를 통해 매개 변수로 사용할 수 있습니다. 메서드는 템플릿 ref 메서드를 통해 하위 구성 요소를 가져옵니다. 예를 들어 해당 값을 얻을 수 있습니다.
// Vue2.x\
Vue.prototype.$api = axios;\
Vue.prototype.$eventBus = eventBus;\
\
// Vue3.x\
const app = createApp({})\
app.config.globalProperties.$api = axios;\
app.config.globalProperties.$eventBus = eventBus;로그인 후 복사
로그인 후 복사
Note:
전역 컴파일러 매크로는 스크립트 설정에서만 사용할 수 있습니다. 모드;
스크립트 설정 모드, 매크로를 사용할 때 가 필요하지 않음을 직접 사용할 수 있습니다. 🎜🎜스크립트 설정 모드는 다음을 포함하여 총 4개의 매크로를 제공합니다. 그리고 기본값이 있습니다. 🎜🎜
在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProperties 配置：
// Vue2.x\
Vue.prototype.$api = axios;\
Vue.prototype.$eventBus = eventBus;\
\
// Vue3.x\
const app = createApp({})\
app.config.globalProperties.$api = axios;\
app.config.globalProperties.$eventBus = eventBus;로그인 후 복사
로그인 후 복사
使用时需要先通过 vue 提供的 getCurrentInstance方法获取实例对象：
 "166635446899188Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635447223523Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
5. v-model 变化
文档地址：v3.cn.vuejs.org/guide/migra…
当我们在使用 v-model指令的时候，实际上 v-bind 和 v-on 组合的简写，Vue2.x 和 Vue3.x 又存在差异。
Vue2.x
 "166635447784015Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
在子组件中，如果要对某一个属性进行双向数据绑定，只要通过 this.$emit('update:myPropName', newValue) 就能更新其 v-model绑定的值。
 "166635448198942Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
script-setup模式下就不能使用 this.$emit去派发更新事件，毕竟没有 this，这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现：
 "166635448694793Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
父组件使用的时候就很简单：
 "166635449035235Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
6. 开发环境报错不好排查
文档地址：v3.cn.vuejs.org/api/applica…
Vue3.x 对于一些开发过程中的异常，做了更友好的提示警告，比如下面这个提示：
 "166635449483446Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
这样能够更清楚的告知异常的出处，可以看出大概是 <elinput>这边的问题，但还不够清楚。这时候就可以添加 Vue3.x 提供的<strong>全局异常处理器</strong>，更清晰的<strong>输出错误内容和调用栈信息，代码如下</strong>：</elinput>
 "166635449972819Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
这时候就能看到输出内容如下：
 "166635450261800Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
一下子就清楚很多。当然，该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读：Vue3 如何实现全局异常处理？
7. 观察 ref 的数据不直观，不方便
当我们在控制台输出 ref声明的变量时。
会看到控制台输出了一个 RefImpl对象：
 "166635451016671Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
看起来很不直观。我们都知道，要获取和修改 ref声明的变量的值，需要通过 .value来获取，所以你也可以：
 "166635451656941Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
这里还有另一种方式，就是在控制台的设置面板中开启 「Enable custom formatters」选项。
 "166635452010026Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
image.png
 "166635452457009Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
image.png
这时候你会发现，控制台输出的 ref的格式发生变化了：
 "166635452962498Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
更加清晰直观了。
이 방법을 "Vue.js 디자인 및 구현"에서 발견했는데, 문서에서 관련 소개를 찾을 수 없습니다. 친구가 발견하면 알려주세요~
2. 1. Vite 동적 가져오기 사용 시 문제
문서 주소:
cn.vitejs.dev/guide/featu…webpack을 사용하는 학생은 webpack에서 require.context동적 가져오기 파일:
 "166635453384657Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
require.context动态导入文件：
在 Vite 中，我们可以使用这两个方法来动态导入文件：
该方法匹配到的文件默认是懒加载，通过动态导入实现，构建时会分离独立的 chunk，是异步导入，返回的是 Promise，需要做异步操作，使用方式如下：
 "166635453711909Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
该方法是直接导入所有模块，并且是同步导入，返回结果直接通过 for...in循环就可以操作，使用方式如下：
 "166635454174852Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
如果仅仅使用异步导入 Vue3 组件，也可以直接使用 Vue3 defineAsyncComponent API 来加载：
 "166635454637710Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
2. Vite 配置 alias 类型别名
文档地址：cn.vitejs.dev/config/#res…
当项目比较复杂的时候，经常需要配置 alias 路径别名来简化一些代码：
 "16663545512659Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
在 Vite 中配置也很简单，只需要在 vite.config.ts 的 resolve.alias中配置即可：
 "166635455585048Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
如果使用的是 TypeScript 时，编辑器会提示路径不存在的警告⚠️，这时候可以在 tsconfig.json中添加 compilerOptions.paths的配置：
 "166635456093530Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
3. Vite 配置全局 scss
文档地址：cn.vitejs.dev/config/#css…
当我们需要使用 scss 配置的主题变量（如 $primary）、mixin方法（如 @mixin lines）等时，如：
 "166635456458651Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
我们可以将 scss 主题配置文件，配置在 vite.config.ts 的 css.preprocessorOptions.scss.additionalData中：
 "166635456758932Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
如果不想使用 scss 配置文件，也可以直接写成 scss 代码：
 "166635457188352Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
三、VueRouter
1. script-setup 模式下获取路由参数
文档地址：router.vuejs.org/zh/guide/ad…
由于在 script-setup模式下，没有 this可以使用，就不能直接通过 this.$router或 this.$route来获取路由参数和跳转路由。当我们需要获取路由参数时，就可以使用 vue-router提供的 useRouteVite에서는 다음 두 가지 방법을 사용하여 파일을 동적으로 가져올 수 있습니다:
이 방법 일치하는 파일은 기본적으로  "166635457557124Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
동적 가져오기
를 통해 구현되는 🎜지연 로딩🎜입니다. 빌드 시 🎜독립적인 청크를 분리🎜하여 🎜비동기 가져오기🎜로 반환됩니다. . 사용 방법은 다음과 같습니다. 🎜🎜 🎜🎜이 메서드는 🎜모든 모듈을 직접 가져오고🎜, 🎜동기적으로 가져옵니다🎜. 그리고 반환 결과는 for...in 루프를 통해 직접 전달되어 연산이 가능하며, 사용 방법은 다음과 같습니다. 🎜🎜 "1666354541748524 .png")
🎜🎜Vue3 구성 요소의 비동기 가져오기만 사용하는 경우 Vue3 정의AsyncComponent를 직접 사용할 수도 있습니다. 로드할 API: 🎜🎜 "166635454637710Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜중국어 언어 팩을 도입하고 ElementPlus 구성에 추가하면 중국어로 전환할 수 있습니다.
 "166635466381441Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
이때 ElementPlus의 구성 요소 텍스트가 중국어로 된 것을 볼 수 있습니다.
 "166635466823237Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
Summary
위는 제가 최근 3개의 프로젝트를 시작한 후 실제 Vue3 제품군 버킷까지 겪은 함정 회피 경험을 요약한 것입니다. 사실 그 중 많은 부분이 문서에 소개되어 있지만 익숙하지 않았습니다. 처음에는. 또한 모두가 문서를 더 많이 읽어보시길 바랍니다~
Vue3 스크립트 설정 모드는 실제로 쓰여질수록 점점 더 인기를 얻고 있습니다.
이 글의 내용에 대해 궁금한 점이 있으시면 언제든지 댓글로 토론해 주세요.
【추천 관련 동영상 튜토리얼: vuejs 입문 튜토리얼, 웹 프론트엔드 시작하기】
 "166635418897602Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "16663545512659Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜🎜Vite에서 구성하는 것도 매우 간단합니다.  "166635456458651Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜🎜  "1666354567589323 .png")
🎜🎜 scss 구성 파일을 사용하지 않으려면 scss 코드를 직접 작성할 수도 있습니다: 🎜🎜 "166635457188352Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜 "166635457923030Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635458490754Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635458879579Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635459320131Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635459735622Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635460174147Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635460834057Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635461271039Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635461767274Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635457923030Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635462214172Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
4. 피니아 "166635465433064Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
 "166635465982796Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
2. Pinia가 데이터 상태를 수정하는 방법🎜🎜공식 웹사이트에서 제시한 계획에 따르면 현재 수정하는 방법은 세 가지가 있습니다. 🎜 "166635460174147Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜
🎜🎜사용 시: 🎜🎜🎜🎜이 세 가지 방법 모두 피니아에서 매장의 데이터 상태를 업데이트할 수 있습니다. 🎜 "166635461767274Vue3 제품군 버킷 개발의 15가지 일반적인 문제(위험을 빠르게 피하는 데 도움이 됨)")
🎜🎜공식 이슈에서 오랫동안 읽어보세요: 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
