一个快速更新是Vue 3捆绑了对可选链接的支持。
要进行测试，您可以尝试编译以下Vue组件代码。

<template>
  <div id="app" v-if="user?.username">
    @{{ user?.username }} - {{ fullName }} <strong>Followers: </strong>
    {{ followers }}
    <button style="align-self: center" @click="followUser">Follow</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  props: {
    test: Object
  },
  data() {
    return {
      followers: 0,
      user: {
        id: 1,
        test: {},
        username: '_sethAkash',
        firstName: undefined,
        lastName: 'Seth',
        email: 'sethakash007@gmail.com',
        isAdmin: true
      }
    }
  },
  computed: {
    fullName(): string {
      //
      return `${this?.test?.firstName} ${this?.user?.lastName}`
    }
  },
  methods: {
    followUser: function () {
      this.followers += 1
    }
  },
  watch: {
    followers(newFollowerCount, oldFollowerCount) {
      if (oldFollowerCount < newFollowerCount) {
        console.log(`${this?.user?.username} has gained a follower!`)
      }
    }
  },
  mounted() {
    this.followUser()
  }
})
</script>

尝试vue-template-babel-compiler
它使用Babel来启用Optional Chaining(?.)、Nullish Coalescing(??)以及Vue.js SFC的许多新ES语法。

Github Repo: vue-template-babel-compiler（第一个字母）

演示

用法

1.安装

npm install vue-template-babel-compiler --save-dev

2.配置

1.版本-CLI

DEMO project for Vue-CLI

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

第二章. Nuxt.js
DEMO project for Nuxt.js

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

详细用法请参考REAMDE
支持Vue-CLI, Nuxt.js, Webpack，任何环境都使用vue-loader v15+。

根据这篇关于这里一个问题的评论
您可以创建一个全局mixin并使用eval函数来计算表达式。
示例：

Vue.mixin({
  methods: {
    $evaluate: param => eval('this.'+param)
  }
});

在模板中：

<template>
  <p>{{ $evaluate('user?.name') }}</p>
</template>

他们还补充说，它可能并不完美：
尽管它仍然不能替代真实的运算符，尤其是当它多次出现时

编辑

如上所述，使用eval可能会带来一些意想不到的问题，我建议您使用计算属性代替。
在SFC中：

<template>
  <p>{{ userName }}</p>
</template>

<script>
export default {
  data(){
    return { 
      user: {
        firstName: 'Bran'
      }
    }
  },
  computed: {
    userName(){
      return this.user?.firstName
    }
  }
}
</script>

/*
 * Where to use: Use in vue templates to determine deeply nested undefined/null values
 * How to use: Instead of writing parent?.child?.child2 you can write
 *            isAvailable(parent, 'child.child2')
 * @author    Smit Patel
 * @params    {Object} parent
 *            {String} child
 * @return    {Boolean}     True if all the nested properties exist
 */
export default function isAvailable(parent, child) {
  try {
    const childArray = String(child).split('.');
    let evaluted = parent;
    childArray.forEach((x) => {
      evaluted = evaluted[x];
    });
    return !!evaluted;
  } catch {
    return false;
  }
}

用途：

<template>
  <div>
    <span :v-if="isAvailable(data, 'user.group.name')">
      {{ data.user.group.name }}
    <span/>
  </div>
</template>
<script>
import isAvailable from 'file/path';
export default {
   methods: { isAvailable }
}
</script>

这并不完全一样，但我认为，在这种情况下，它可能是事件更好的大多数情况下。
我使用Proxy来实现magic方法的效果。你只需要调用一个对象的nullsafe方法，然后使用普通的链接。
在某些版本的VueJs中，你不能指定一个默认值。它将我们的null安全值视为一个对象（这是有充分理由的），然后JSON.stringify它，绕过toString方法。我可以覆盖toJSON方法，但你不能返回字符串输出。它仍然将你的返回值编码为JSON。所以你的字符串最后用引号括起来。
第一个

在搜索了许多可能性后，我做了一个函数来帮助我。
创建一个js文件以保存helper函数并导出它

const propCheck = function (obj = {}, properties = ""){

    const levels = properties.split(".");
    let objProperty = Object.assign({}, obj);

    for ( let level of levels){
        objProperty =  objProperty[level];
        if(!objProperty) 
            return false;
    }

   return true;

}
export default propCheck;

并在Vue示例中全局安装此函数

Vue.prototype.$propCheck = propCheck;

在模板中使用后

<span>{{$propCheck(person, "name")}}</span>

或

<span>{{$propCheck(person, "contatcs.0.address")}}</span>

或

<span>{{$propCheck(person, "addres.street")}}</span>

对模板和js文件使用getSafe（）方法方式：）

<template><div>
  {{getSafe(() => obj.foo.bar)}} <!-- returns 'baz' -->
  {{getSafe(() => obj.foo.doesNotExist)}} <!-- returns undefined -->
</div></template>

<script>
export default {
    data() {
        return {obj: {foo: {bar: 'baz'}}};
    },
    methods: {getSafe},
};
function getSafe(fn) {
    try { return fn(); }
    catch (e) {}
}
</script>

**2022年7月更新：**可与Vue 2.7（https://blog.vuejs.org/posts/vue-2-7-naruto.html）配合使用

2.7也支援在模板运算式中使用ESNext语法。

在这种情况下，可以使用loadash的get方法：
_.get(object, path, [defaultValue])
获取对象路径处的值。如果解析的值未定义，则返回defaultValue以取代它。
https://lodash.com/docs/4.17.15#get

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

_.get(object, 'a.b.c', 'default');
// => 'default'