vue2 插值语法中使用可选链运算符(.?)compile异常排查思路

@[TOC](vue2 插值语法中使用可选链运算符(.?)compile异常排查思路)

前言

最近接到组内前端求助，在使用v-for进行动态渲染的时候项目突然不能正常编译了，报错提示SyntaxError: Unexpected token ...十分奇怪

代码可参考如下：

      <h3>动态渲染内容</h3>
      <el-row v-for="(item, index) in form.subObjList" :key="index" :gutter="12" :style="{ background: '#edfced' }">
        <el-col> {{item?.projectNameLabel}}：{{item?.projectName}}</el-col>
        <el-col> {{item?.technicalPointLabel}}：{{item?.technicalPoint}}</el-col>
        <el-col> {{item?.mainFunctionLabel}}：主要功能：{{item?.mainFunction}}</el-col>
        <el-col> {{item?.difficultyLabel}}：{{item?.difficulty}}</el-col>
        <el-col><hr></el-col>
      </el-row>

待渲染的数据

      this.form.subObjList = [
        { projectNameLabel: '项目名称',
          projectName: 'xx项目前端',
          technicalPointLabel: '技术点',
          technicalPoint: 'vue vuex vue-router js',
          mainFunctionLabel: '主要功能',
          mainFunction: '前端交互ux整改，完善用户体验',
          difficultyLabel: '难点',
          difficulty: '大批量数据渲染'
        },
        { projectNameLabel: '项目名称',
          projectName: 'xx项目后端',
          technicalPointLabel: '技术点',
          technicalPoint: 'springboot mybatis redis pgsql',
          mainFunctionLabel: '主要功能',
          mainFunction: '支持用户的特定业务流程',
          difficultyLabel: '难点',
          difficulty: '大批量数据校验'
        }
      ]

排查思路

把新增的代码区域el-row以及内部el-col注释掉，重新加载检查编译情况，这时能成功编译
接着在放开el-row新增自定义el-col，重新加载检查编译情况，能够成功编译和渲染

      <h3>动态渲染内容</h3>
      <el-row v-for="(item, index) in form.subObjList" :key="index" :gutter="12" :style="{ background: '#edfced' }">
      <el-col>heheda</el-col>
<!--        <el-col> {{item?.projectNameLabel}}：{{item?.projectName}}</el-col>-->
<!--        <el-col> {{item?.technicalPointLabel}}：{{item?.technicalPoint}}</el-col>-->
<!--        <el-col> {{item?.mainFunctionLabel}}：主要功能：{{item?.mainFunction}}</el-col>-->
<!--        <el-col> {{item?.difficultyLabel}}：{{item?.difficulty}}</el-col>-->
<!--        <el-col><hr></el-col>-->
      </el-row>

观察到插值语法中的可选链运算符(.?)比较怪，于是选取一个el-col去掉.?并放开注释，可以正常渲染

再次加上.?，重现了编译失败

由此可以确认是在插值语法中使用可选链运算符(.?)引起的

临时解决措施

去掉可选链运算符(.?)，与前端确认，此处动态渲染的数据需请求接口得到，item的属性没有在data()中申明，所以使用(.?)来避免一些潜在的问题

后续

处理完这个问题后，计划在个人PC上复现，但是并没有复现成功（环境为vue 3.4.28 & node 18.20.4
），经过搜查发现该问题会在vue2低版本上出现，此时相应的node.js版本不支持在插值语法中使用可选链运算符，于是搭建了（vue 2.6.10 & node 14.16），确实成功复现了这个问题。求助的项目vue版本为2.5.x，考虑到不久后该项目就会升级vue 3，所以没有深究如何在vue 2中实现插值语法可以使用可选链运算符号。
此处分享在vue3中该案例的完整代码：

<template>
  <div>
    <h3>Welcome</h3>
    <el-form :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    <h3>动态渲染内容</h3>
      <el-row v-for="(item, index) in form.subObjList" :key="index" :gutter="12" :style="{ background: '#edfced' }">
        <el-col> {{item?.projectNameLabel}}：{{item?.projectName}}</el-col>
        <el-col> {{item?.technicalPointLabel}}：{{item?.technicalPoint}}</el-col>
        <el-col> {{item?.mainFunctionLabel}}：主要功能：{{item?.mainFunction}}</el-col>
        <el-col> {{item?.difficultyLabel}}：{{item?.difficulty}}</el-col>
        <el-col><hr></el-col>
      </el-row>
    </el-form>
    <button @click="setRenderInfo">动态渲染赋值</button>
    <button @click="clearRenderInfo">动态渲染清空</button>
  </div>
</template>

<!--vue3写法-->
<!--<script setup lang="ts" name="About">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormProps } from 'element-plus'

let form = {
  name: '松树戈',
  age: '66',
  address: '这里',
  secondLabel: '我就是第二个标题',
  subObjList: []

}
// 模拟远程请求后对subObjList进行赋值
form.subObjList = [
  { projectNameLabel: '项目名称',
    projectName: 'xx项目前端',
    technicalPointLabel: '技术点',
    technicalPoint: 'vue vuex vue-router js',
    mainFunctionLabel: '主要功能',
    mainFunction: '前端交互ux整改，完善用户体验',
    difficultyLabel: '难点',
    difficulty: '大批量数据渲染'
  },
  { projectNameLabel: '项目名称',
    projectName: 'xx项目后端',
    technicalPointLabel: '技术点',
    technicalPoint: 'springboot mybatis redis pgsql',
    mainFunctionLabel: '主要功能',
    mainFunction: '支持用户的特定业务流程',
    difficultyLabel: '难点',
    difficulty: '大批量数据校验'
  }
]
</script>-->
<!--vue2写法-->
<script>
  export default {
    data() {
      return {
        form: {
          name: '松树戈',
          age: '66',
          address: '这里',
          secondLabel: '我就是第二个标题',
          subObjList: []
        }
      }
    },
    mounted() {
      console.log('在-mounted内部')
    },
    methods: {
      setRenderInfo() {
        this.form.subObjList = [
          { projectNameLabel: '项目名称',
            projectName: 'xx项目前端',
            technicalPointLabel: '技术点',
            technicalPoint: 'vue vuex vue-router js',
            mainFunctionLabel: '主要功能',
            mainFunction: '前端交互ux整改，完善用户体验',
            difficultyLabel: '难点',
            difficulty: '大批量数据渲染'
          },
          { projectNameLabel: '项目名称',
            projectName: 'xx项目后端',
            technicalPointLabel: '技术点',
            technicalPoint: 'springboot mybatis redis pgsql',
            mainFunctionLabel: '主要功能',
            mainFunction: '支持用户的特定业务流程',
            difficultyLabel: '难点',
            difficulty: '大批量数据校验'
          }
        ]
      },
      clearRenderInfo() {
        this.form.subObjList = []
      }
    }
  }
</script>
<style scoped>
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgb(85, 84, 84);
  font-size: 18px;
}
</style>

demo项目完整代码：

码云
gitehub