Vue中如何不使用eval依次验证对象嵌套路径的有效性？

嘿，这个嵌套对象的空值判断问题我太有共鸣了！写一大串rawData && rawData.system && rawData.system.destinations不仅啰嗦，维护起来也糟心，eval更是绝对要避开的坑。给你几个实用的Vue友好解决方案：

1. 用ES可选链操作符?.（最推荐） #

这是ES2020引入的特性，现在Vue CLI创建的项目默认都会通过Babel支持它，直接解决逐层判断的问题。它会自动按路径依次检查每一层：如果某一层不存在（null/undefined），就会立即返回undefined，不会抛出错误。

在模板里直接这么写就行：

<template v-if="rawData?.system?.destinations">
  <!-- 你的内容 -->
</template>

如果需要处理空数组这类“存在但为falsy”的情况，可以搭配空值合并操作符??，比如：

<template v-if="rawData?.system?.destinations ?? false">

（不过大多数场景下，直接用?.就足够满足v-if的判断需求）

2. 封装成Vue计算属性（适合复用场景） #

如果你需要在多个地方用到这个判断，或者逻辑稍微复杂，把判断逻辑放到计算属性里是最Vue的做法——代码更整洁，还能享受Vue的响应式缓存。

示例代码：

export default {
  // ...其他选项
  computed: {
    hasValidDestinations() {
      // 用可选链的写法
      return this.rawData?.system?.destinations;
      // 如果要兼容完全不支持ES2020的环境，就写传统判断：
      // return this.rawData && this.rawData.system && this.rawData.system.destinations;
    }
  }
}

然后模板里直接用：

<template v-if="hasValidDestinations">

3. 全局注册安全取值方法（兼容老项目） #

如果你的项目环境比较老，没法用可选链，或者有大量类似的嵌套取值需求，可以写一个安全的全局工具方法，完全替代eval：

在main.js里注册全局方法：

Vue.prototype.$safeGet = function(obj, path) {
  // 把路径字符串拆分成数组，逐层遍历检查
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : undefined;
  }, obj);
};

然后在任何组件的模板里都能这么用：

<template v-if="$safeGet(rawData, 'system.destinations')">

这个方法通过字符串分割+数组遍历实现，完全没有eval的安全风险，还能在所有环境下运行。

4. Vue3额外小技巧（可选） #

如果你用的是Vue3，还可以在模板里结合解构和可选链，不过这个写法不如直接用?.直观，仅供参考：

<template v-if="({ system } = rawData); system?.destinations">
  <!-- 内容 -->
</template>

总结一下：优先用可选链操作符，简洁又现代；需要复用逻辑就用计算属性；老项目环境就用全局安全取值方法，彻底告别冗长的&&链和危险的eval。

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