vue代码中的?是什么意思

Question

今天学习大佬的代码，对于其中出现的？，不明白意思，特发贴求助。

其中 onBeforeRouteUpdate((to)={
pageType.value = to?.meta?.type
})

这两个问号是什么意思？

Answer 1

?. 是「可选链运算符 (Optional chaining)」，在有些语言中也称为「空条件运算符」，是 JavaScript 的语法，目前好像是在 Stage-4 阶段，还没正式发布。不过在 TypeScript 中已经是正式语法了。这个语法跟 Vue 无关。

可选链运算是一种短路 (short-circuits) 运算，只要调用者是 null 或 undefined 就直接返回 undefined，不会进行属性访问计算，也不会进行后续的计算。比如

to?.meta.type，如果 to 是 null | undefined，那么就不会去取 .meta 的值，更不会去算 .type；直接返回 undefined。

那么为什么需要对 meta 也进行可选链运算呢？那是因为在 to 有值的情况下，其 meta 属性仍然可能无值，此时再对其取 .type 仍然可能出现对 undefined 取属性或者对 null 取属性的错误。比如

const to = {}

to === undefined;  // false
to === null;       // false
to.meta === undefined;  // true
to.meta.type;      // TypeError
to.meta?.type;     // undefined
to?.meta?.type;    // undefiend

如果想判断某个属性是否存在于某个对象中，可以使用 in 运算，比如

const adventurer = {
    xname: "Alice",
    cat: {
        name: "Dinah"
    }
};

console.log("cat" in adventurer);  // true
console.log("dot" in adventurer);  // false

但是，如果 adventurer 为 null | undefined 时，会报 TypeError。如果不清楚 adventurer 是否有值的情况下，可以使用「空值合并运算符 (Nullish coalescing)」使用空对象代替，比如

let adventurer = null;
"cat" in (adventurer ?? {});  // false

当然在多数时候用 ?. 和 undefined 来判断会更方便，比如

let adventurer = null;
console.log(adventurer?.cat === undefined);  // true

回到问题中来，想知道 xname 是否存在，那就是

"xname" in adventurer;  // true
adventurer?.xname === undefined; // false

Answer 2

两次判断属性是否存在的意思，JavaScript的可选链写法。通过连接的对象的引用或函数可能是 undefined 或 null 时，可选链操作符提供了一种方法来简化被连接对象的值访问。

具体可看mdn