js中使用==和===的差别为什么这么大?

Question

我要做的效果就是当鼠标移动到哪个分类时,哪个分类就加上一个有绿色背景色的类,但是为什么我使用==来判断和===来判断时差别这么大呢?!

这是在vue中的template里面的一块代码:

      <li
        v-for="item in menuList"
        :key="item.id"
        @mouseenter="categoryId = item.id"
        :class="{ active: categoryId === item.id }"
就是最后这一行
      >

使用==时重新刷新时的界面:

使用===判断时,重新刷新的界面:

球球好心人解答!感激不尽

Answer 1

不知道你的categoryId和item.id的值的情况下很难说明清楚。
我只能猜测，由于==比===更宽松，你的页面加载的时候，categoryId == item.id是true，但categoryId === item.id是false，所以在使用==的情况下，所有<li>的class都被加上了active，而===没有这个问题。

Answer 2

== 不校验类型

=== 校验类型

console.log( 1 == '1')
console.log( 1 !== '1')

Answer 3

因为 == 只是判断值是否相等， 而 === 用于判断值和类型都相等

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。