如何让Vue支持类似AngularJS的宽松表达式解析，避免访问未定义属性报错

方案1：Vue 3 直接使用原生可选链（最推荐） #

Vue 3 模板原生支持 ES2020 可选链操作符，无需额外配置，直接修改表达式即可：

{{ foo?.earlier_versions?.length }}

当foo或foo.earlier_versions为undefined/null时，表达式会直接返回undefined，不会抛出错误中断页面渲染，效果和AngularJS的容错表现一致。

方案2：Vue 2 兼容方案 #

Vue 2 模板默认不支持可选链语法，可通过以下两种方式实现同等效果：

• 全局挂载安全取值工具函数
  在项目入口文件main.js中挂载全局方法：

// 第一个参数为目标对象，第二个为属性路径，第三个为不存在时的默认返回值
Vue.prototype.$safeGet = function (target, path, defaultValue = '') {
  return path.split('.').reduce((prev, curr) => {
    return prev && prev[curr] !== undefined ? prev[curr] : defaultValue
  }, target)
}

模板中直接调用即可：

{{ $safeGet(foo, 'earlier_versions.length') }}

• 用Babel插件支持可选链语法
  安装vue-template-babel-compiler和@babel/plugin-proposal-optional-chaining，修改vue.config.js中的编译器配置后，即可在Vue2模板中直接使用?.可选链语法，用法和Vue3一致。

方案3：计算属性封装（适合单组件少量使用场景） #

如果不想修改全局配置，也可以在组件内用计算属性做容错处理：

computed: {
  versionLength() {
    return this.foo?.earlier_versions?.length ?? ''
  }
}

模板中直接使用计算属性：

{{ versionLength }}

内容的提问来源于stack exchange，提问作者Anders Lindén