Vue2 中 ?. 可选链式调用操作符出现的问题

一、什么是可选链式调用操作符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。链接： 可选链式操作符地址
下面举例示例代码如下：

const obj = {
	obj1: {
		obj2: {
			obj3: ['obj1', 'obj2', 'obj3']
		}
 	}
 }
// 当我们想获取 -- obj2 -- 的时候
// 如果直接obj.obj1.obj2.obj3[1]的话obj1、obj2、obj3任意一项不存在的话都会报错 -- undefined.后面的值会报错的

// 所以得把每一项都判断一遍（未优化的判断）
obj && obj.obj1 && obj.obj1.obj2 && obj.obj1.obj2.obj3 && obj.obj1.obj2.obj3[0] // obj1

// 而采用?.操作符的话 （优化后的判断）
obj?.obj1?.obj2?.obj3?.[0] // obj1

二、在vue2中遇到的问题以及解决方案

当我们在vue2中使用的时候，你会发现在Vue2环境下js中能正常使用 ?. ，但是在template中却报错。

报错的原因可能是因为：Vue2 template中无法正常识别 ?. 操作符 可能是因为 ?. 可选链语法比较新，没有在template中做关于这方面的处理
解决方案：

1. 第三方库 lodash中的 _get 方法
2. 升级到vue3，目前vue3成为默认版本生态趋近于成熟且template支持可选链操作符
3. computed计算属性中使用 ?.
4. 对template源码进行拦截更改，代码侵入性过高
5. 写一个hook挂到global/mixins上随时调用
6. 如需使用链式调用操作符可以封装方法不要在表达式中直接使用
   这些都是上网浏览的方案。

---

还一种方案来自一位大佬封装的?.链式调用操作符的代码（如下）

let obj = { a: { b: { c: ['冰墩墩', '冬奥会'] } } }

function variableJudge(obj, keyName, tag = '?.') {
  if (!obj) return undefined
  let keys = keyName.split(tag)
  return keys.reduce((objNew, keyItem) => {
    if (keyItem === '') return objNew
    if (keyItem.indexOf('.') !== -1) return variableJudge1(objNew, keyItem, '.')
    return objNew?.[keyItem]
  }, obj)
}
//------------------------------ Proxy 版本 --------------------------------------
function variableJudgeProxy(obj, tag = '?.') {
  if (!obj) return undefined
  return new Proxy(obj, {
    get: (obj, key) => {
      const keys = key.split(tag)
      return keys.reduce((objNew, keyItem) => {
        if (keyItem === '') return objNew
        if (keyItem.indexOf('.') !== -1) return variableJudgeProxy(objNew, '.')[keyItem]
        return objNew?.[keyItem]
      }, obj)
    }
  })
}
  console.log(variableJudge(obj, '?.a?.b?.c?.0')) //冰墩墩
  console.log(variableJudgeProxy(obj)['?.a?.b?.c?.0']) //冰墩墩
------------------------------------------------------------------------------\
// 优化后的代码
let obj = { a: { b: { c: ['冰墩墩', '冬奥会'] } } }

const variableJudge = (obj, keyName) => {
  if (!obj) return null
  let keys = (keyName + '').split('.')
  let tempObj = obj
  for (let i = 0; i < keys.length; i++) {
    if (!tempObj) return
    if (keys[i] !== '') tempObj = tempObj?.[keys[i]]
  }
  return tempObj
}
console.log(variableJudge(obj, '.a.b.c.0')) //冰墩墩
// 然后我们挂到Vue原型上就可以随时使用了
Vue.prototype.$vj = variableJudge
// 最终效果
<div>{{ $vj(ugc, '.itemList.item.pic.picList.1.picUrl') }}</div>
[作者：SHENGK 来源：稀土掘金](https://juejin.cn/post/7064239641364267044)