Vue3从OptionsApi转CompositionApi时jQuery getJSON报错排查

核心错误点 #

1. setup中this无意义：Vue3的setup函数执行时组件实例尚未创建，this指向undefined，因此var self = this完全无效，无法用来访问组件变量。
2. 变量作用域错误：self和userData的声明在onMounted之后，导致onMounted回调无法访问到有效变量（var声明的self会提升但值为undefined，let声明的userData不会提升，直接访问会报错）。
3. ref变量修改方式错误：用ref创建的响应式变量，必须通过.value属性修改其值，直接赋值会覆盖ref包装对象，导致失去响应性。
4. 回调上下文问题：$.getJSON的普通回调函数内的this指向jQuery请求对象，而非组件相关上下文，无需用self中转，直接利用箭头函数捕获外层作用域即可。

修正后的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<script type="module">
import { createApp, ref, onMounted } from 'vue'

const app1 = createApp({
  setup() {
    // 提前声明响应式变量，确保作用域覆盖onMounted回调
    let userData = ref([])
    const message = ref('Hello debug!')

    onMounted(() => {
      console.log('Hello')
      const dataURL = 'https://somesite.com.au?id=memberAds'
      
      // 用箭头函数捕获外层作用域的userData
      $.getJSON(dataURL, (data) => {
        // 正确修改ref变量的值
        userData.value = data.rows;
      });
    })  

    return {              
      message,
      userData
    }
  }
})
app1.mount('#app')
</script>

关键修改说明 #

• 将响应式变量userData、message的声明移至onMounted之前，保证回调能访问到变量。
• 移除无用的var self = this，Composition API无需依赖this操作响应式变量。
• 改用箭头函数作为$.getJSON的回调，直接捕获外层作用域的userData，避免上下文混淆。
• 修改userData时使用.value属性，确保响应性正常生效。

内容的提问来源于stack exchange，提问作者user7492713