Vue项目上this.$set的用法

关注“青年码农”，回复“特效“

获取各种资料粒子特效、可视化等源码

本篇文章主要讲解Vue项目中，this.$set这个api的用法.

我们都知道当Vue的data里边声明的对象，如果向对象中添加新的属性，更新此属性的值，视图是不会更新的。官方是这么说的

因为 Vue 无法探测普通的新增 property 比如：

this.myObject.newProperty =  'hi'

这个时候，我们就需要使用set api，这个api就是像响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。下面我们看看官方对这个api的说明：

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target 要更改的数据源（可以是一个对象或者数组）

  • {string | number} propertyName/index 要更改的具体数据 （索引）

  • {any} value 重新赋的值

• 返回值：设置的值。

我们怎么使用呢？下面是一段代码，点击按钮，把list第一个值改变，