解释这两段代码的区别 | if ... else ... 和 if ... ...

问题 

    我在vue3项目里一开始的第二段代码，但是结果总是将active的值变为0，让我很是不解，于是将其改为第一段代码块的形式，就正常了，很是不解，于是便来探究这两段代码的区别。

区别

        这两段代码的区别主要在于它们在处理条件语句时的逻辑和语法完整性。

代码块1：

watch(() => route.query.messageType, () => {
  if (route.query.messageType === 'life') {
    active.value = 1
  }
  else {
    active.value = 0
  }
})

• 逻辑: 这段代码首先检查route.query.messageType是否等于字符串'life'。

  • 如果条件为真（即route.query.messageType的值是'life'），则active.value被设置为1。

  • 如果条件为假（即route.query.messageType的值不是'life'），则active.value被设置为0。

• 结构: 这是一个完整的if-else语句，包含了if部分和else部分，确保了无论条件真假，active.value都会被赋予一个明确的值。

代码块2：

watch(() => route.query.messageType, () => {
  if (route.query.messageType === 'life')
    active.value = 1
  active.value = 0
})

• 逻辑: 这段代码同样首先检查route.query.messageType是否等于字符串'life'。

  • 如果条件为真（即route.query.messageType的值是'life'），则active.value被设置为1。

  • 但是，不论条件真假，active.value随后都会被无条件地设置为0，因为active.value = 0这行代码并不在else块中，而是紧跟在if块内部且没有任何条件限制。

• 结构: 这是一个语法上不完整的if语句，缺少了对应的else部分。更重要的是，active.value = 0这行代码的位置导致了逻辑错误，因为它会无条件执行，从而覆盖了if块中可能的赋值。

总结

• 第一段代码正确地根据条件为active.value赋予不同的值。

• 第二段代码由于缺少正确的结构，导致active.value总是被设置为0，无论route.query.messageType的值是什么。这是一个逻辑错误，应该通过添加else块或者将active.value = 0移到if块外部（如果这是有意为之的话，但通常这不是好的编程实践）来修正。