vue中this.$set的用法（解决vue视图不及时更新问题）

Dear 丶 2023-01-13 01:43 390阅读 0赞

## 应用背景： ##

项目中有给表格数据新加了一个edit字段来控制每行数据的编辑功能，html如图：  
注意：添加数据时必须也使用$set，比如我上面注释的那些写法也会出bug  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]  
通过点击管理按钮，改变edit的布尔值来切换视图，js如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]  
然后发现点击按钮视图根本没有切换，然后在控制台打印出来的edit也是正确的，此时就需要用到`this.$set`来解决，js如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]

## `this.$set`实现什么功能，为什么要用它？ ##

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到`this.$set（）`这个方法了，简单来说`this.$set`的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如`this.tableData[index].edit = true`)，所以用`this.$set（）`的写法就是`this.$set( this.tableData, this.tableData[index].edit, true )`。

//调用方法
    this.$set( target, key, value )
    // target：要更改的数据源(可以是对象或者数组)
    // key：要更改的具体数据
    // value ：重新赋的值

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/e9450eed47524147a0f18e5d19aa968a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/c4ea789be8534e2e98f889b496379abc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/96f489dd51374c99a488d9a83acd8d29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/111091974b434815b5d6a5615a065a01.png