Vue2 使用可选链操作符 ？.

取数据的时候数据层级比较深，控制台报了如下错误：

是由于某个属性为空，所有报错，但是如果使用v-if或者三元操作符的话，由于层级较深，代码就会显得非常长，不好看，所以想使用可选链操作符来进行非空判断，直接使用会出现如下报错：

这是因为vue2的template不支持可选链，一开始我选择把vue版本升级为2.7.0，但是升级版本之后出现报错：Syntax Error: TypeError: Cannot read properties of null (reading 'content')

没能解决，只好将版本降为2.6.10

然后尝试了一位博主的方法，我的步骤如下：

1、安装babel:

npm install @babel/plugin-proposal-optional-chaining --save-dev

解析可选链，解决兼容性问题 

2、在babel.config.js中添加该插件：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      'plugins': ['dynamic-import-node', '@babel/plugin-proposal-optional-chaining']
    }
  }
}

此时可以在<script>中使用了，但是在 <template>中依旧报错

3、在utils.js中增加一个函数：

export const useChain = (target) => {
  return new Proxy(target, {
    get: (target, key) => {
      const keys = key.split('?.')
      return keys.reduce((a, b) => a?.[b], target)
    }
  })
}

4、将其挂载到vue原型上：

main.js:

import { useChain } from './utils/index'
Vue.prototype.$c = useChain

 5、在<template>中使用：

<count-to :start-val="0" :end-val="$c(a)['b?.c']" :duration="2000" />
或者
<div>{{$c(data)['a?.b?.c']}}</div>

data() {
    return {
      a: {
        b:{
           c:'1'
        }  
      }
    }
  }

或者：
const data = {
  a: {
    b: {
      c: 'c'
    }
  }
}

6、总结：

在Vue2.7.0以下版本里面默认不支持，需要babel进行编译，在vue2.7.0以上和vue3里面好像可以直接使用，但是我将版本升级到2.7.0之后报了很多错，止步于Syntax Error: TypeError: Cannot read properties of null (reading 'content')这个错无法解决