錯誤內(nèi)容如下：[plugin:vite:vue] [@vue/compiler-sfc] `defineProps()` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.

今天遇到一種情況，在setup script 里定義了props,而props里的一個屬性是一個方法，想定義一個默認的方法。默認的方法里要用到this(instance)或者props本身，但是怎么寫都會出現(xiàn)上圖的警告。

不得了，搜索了一下。這個問題似乎是vue本身引起，代碼的邏輯的思維是沒有問題。那么記錄一下錯誤的原因：

當我們使用script setup的時候，其實是編譯器幫我們把代碼編譯回去setup的方法，類似我們在defineComponent里寫setup方法，所以setup本身是一個獨立的作用域（setup scope）。

而vue組件本身是一個js文件，也就是script方法里也是一個作用域(module scope)。

也就是說一個vue組件其實同時具備了兩個作用域。

因此，在defineProps里定義default函數(shù)的時候不應該引用setup作用域的變量。

因為props本身應該是屬于module scope，跟setup是同級的。

明白了原因之后，就可以找到解決的辦法。

首先是錯誤的代碼：

解決辦法1：

import引用的時候，變量是定義在module scope的，因此在同一個作用域。

解決辦法2：

把變量定義在script里，這樣也是定義在module scope上。

結語：setup script是一個極好的語法糖，提高了語法效率，但是因此引起的作用域問題會讓新人感覺優(yōu)點莫名其妙。而這些問題往往在官網(wǎng)上是沒有詳細的記錄。最后只能靠大家寫下來的資料。但是，如果對作用域的理解沒有到位，可能會感覺到有點莫名其妙。如果不理解作用域，只是使用解決辦法的話，后面恐怕寫代碼時又會遇到問題，不能隨心所欲。因此，這個問題本身是作用域的問題，希望遇到同樣問題的小伙伴們，好好理解一下作用域本身。