Vue警告：渲染时isMobileTerminal属性未在实例上定义问题排查

开发同时适配移动端、PC端的响应式项目时，需要判断当前访问终端类型，项目运行时Vue抛出如下警告：
Property "isMobileTerminal" was accessed during render but is not defined on instance

警告含义：渲染阶段访问了isMobileTerminal属性，但该属性未在当前组件实例上定义。

终端判断逻辑（flexible.js） #

import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '../constants'
import { useWindowSize } from '@vueuse/core/index'

const { width } = useWindowSize()

// 判断当前是否为移动设备，判断依据屏幕宽度是否小于指定宽度（1280）
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WIDTH
})

导航组件逻辑（navigation/index.vue） #

<template>
  <mobile-navigation v-if="isMobileTerminal"></mobile-navigation>
</template>

<script>
import { isMobileTerminal } from '../../../../utils/flexible'
import mobileNavigation from './mobile/index.vue'
export default {
  name: 'index',
  components: {
    mobileNavigation
  }
}
</script>

<style lang="scss" scoped></style>

项目目录结构 #

• 定位警告触发点：根据报错提示直接定位到导航组件模板中v-if="isMobileTerminal"的绑定逻辑，模板渲染时找不到该变量
• 核对变量导出引入链路：确认flexible.js中isMobileTerminal的导出逻辑正常，组件script块中也已正确写了import引入语句，不存在路径错误、导出错误问题
• 核对组件上下文规则：当前组件使用Options API写法，Vue模板能访问的变量必须是挂载在组件实例上的属性（包括data返回值、computed属性、setup返回值、methods方法等），仅在script顶层import的变量不会自动挂载到组件实例，因此模板无法访问到该变量，触发警告。

二选一即可：

方案1：保留Options API写法，补充setup返回值 #

在组件配置中新增setup选项，将引入的isMobileTerminal返回，暴露给模板上下文：

<template>
  <mobile-navigation v-if="isMobileTerminal"></mobile-navigation>
</template>

<script>
import { isMobileTerminal } from '../../../../utils/flexible'
import mobileNavigation from './mobile/index.vue'
export default {
  name: 'index',
  components: {
    mobileNavigation
  },
  setup() {
    return {
      isMobileTerminal
    }
  }
}
</script>

<style lang="scss" scoped></style>

方案2：使用<script setup>语法糖（更简洁） #

将script块改为setup语法糖模式，import引入的变量可直接在模板中使用，无需手动return：

<template>
  <mobile-navigation v-if="isMobileTerminal"></mobile-navigation>
</template>

<script setup>
import { isMobileTerminal } from '../../../../utils/flexible'
import mobileNavigation from './mobile/index.vue'
</script>

<style lang="scss" scoped></style>

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