vue的method修改data属性过程中,发生了什么

Question

使用vue管理data时发现的问题

情况

由于觉得同页面的多个模态框open&close状态管理麻烦,故想封装一个方法用于管理各个模态框status值,如下

toggleStatus(obj, key) {
      // eslint-disable-next-line no-param-reassign
      obj[key] = !obj[key];
      console.log(this.status);
    }

调用方式为

@click="toggleStatus(status,'showBeastsModal')"

但是使用中发现,这种写法会有一定延迟,没有粗暴的

@click="status.showBeastsModal=false)"

反应快,不知道为什么

Answer 1

两个比较里面的语法不完全一致，上面的写法是先读对象的值，然后设置对象的值；下面的是直接设置对象的值。所以下面的速度会更快一点。对象访问符是要占据一定性能消耗的。
下面一种性能比较高的原因应该不是因为直接在dom上写事件处理，因为本身只是一个语法糖，最终还是要转化为同一种形式。