Vue3報(bào)錯(cuò)：Property “xxx” was accessed during render but is not defined on instance.

翻譯：屬性“xxx”在呈現(xiàn)期間被訪問，但沒有在實(shí)例上定義。

其實(shí)就是在模板上有，但是在script上沒有定義

很多同學(xué)跟說這不是報(bào)錯(cuò)，是警告，其實(shí)只要是在渲染頁面時(shí)出現(xiàn)的問題，我們都可以說成是報(bào)錯(cuò)

因?yàn)槿绻芯?，到?xiàng)目發(fā)布的時(shí)候是會出現(xiàn)問題的

所以不管是報(bào)錯(cuò)還是警告，出現(xiàn)了就必須先解決掉

跟著這個(gè)報(bào)錯(cuò)的還有下面兩個(gè)報(bào)錯(cuò)：
Unhandled error during execution of render function

意思是在執(zhí)行渲染函數(shù)時(shí)未處理的錯(cuò)誤

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
這個(gè)就牛了，警告說可能是vue內(nèi)部的bug，執(zhí)行調(diào)度器刷新期間未處理的錯(cuò)誤。

這三個(gè)報(bào)錯(cuò)都是一起出現(xiàn)的，所以找問題還是挺好找的，解決bug的提供一下思路

出現(xiàn)bug的背景是我在某一個(gè)文件中寫了太多的代碼，所以想把其中一部分封裝成組件再引用進(jìn)來，然后就新建了一個(gè)帶有初始模板的頁面，再把原頁面中的部分代碼函數(shù)樣式復(fù)制過去

初始模板如下：

<template>
</template>

<script>
</script>

<style>
</style>

通過第一個(gè)報(bào)錯(cuò)，模板上有，但是沒有定義，我們可以去script找，發(fā)現(xiàn)script里寫了沒有問題，然后第二三個(gè)報(bào)錯(cuò)并不能給我什么有利的信息，然后我就發(fā)現(xiàn)script中沒有加上組合式 API即setup，加上了就沒報(bào)錯(cuò)了

所以問題的出現(xiàn)原因是在新創(chuàng)建的vue模板文件中沒有加上語法糖

解決問題就是<script setup>

通過此次報(bào)錯(cuò)，需要記一下在新建vue文件封裝組件的時(shí)候檢查標(biāo)簽有沒有少寫

總結(jié)

到此這篇關(guān)于解決Vue3報(bào)錯(cuò):Property “xxx“ was accessed during render but is not defined on instance的文章就介紹到這了,更多相關(guān)Vue3報(bào)錯(cuò)Property “xxx“內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論