vue.set()用法

vue.set()的奥秘与应用：一篇文章带你深入了解

对于新手来说，vue.set()似乎是一个神秘的函数，但其实它是Vue框架中的一个重要工具。今天，让我们跟随貔貅网的小编一起来揭开它的神秘面纱，深入理解vue.set()的用法。

一、vue.set()基本方法介绍

vue.set()方法可以实现改变数据并立刻将新数据渲染在网页上的目的，而且这种方式是响应式的。该方法可以应用于数组和对象类型。

其基本语法为：Vue.set(vm.items, indexOfItem, newValue)。

其中：

vm.items代表源数据

indexOfItem代表要修改的数据的键

newValue代表要修改的数据的新值

二、使用方式

vue.set()的使用非常简单，有两种常见的方式：

方式一：直接调用Vue.set()，传入源数据、要修改的键和新的值。

方式二：使用this或vm的Vue实例对象，调用vm.$set()，同样传入源数据、要修改的键和新的值。

三、实例演示

假设我们有一个数组a，其中包含三个对象，我们想修改其中李四的age为19。如果我们直接修改a[1].age的值，Vue可能无法检测到这个变化，因此无法自动更新视图。这时，我们就需要用到vue.set()。

我们的源数据a如下：

```javascript

let a = [

{name:'张三',age:'20',sex:1},

{name:'李四',age:'21',sex:0},

{name:'王五',age:'22',sex:1},

]

```

假设我们要修改的是a数组中的第二个对象（即下标为1的对象），我们要将其age属性修改为19。那么我们可以这样使用vue.set()：

```javascript

Vue.set(a, 1, { ...a[1], age: 19 }) // 修改了对象的属性值

```

我们也可以使用Vue的forceUpdate()方法手动触发视图的更改。

以上就是貔貅网小编今天分享的关于vue.set()的内容，希望能够帮助大家更好地理解并掌握vue.set()的用法。在Vue框架中，vue.set()是一个非常重要的方法，它可以帮助我们实现数据的响应式更新，使我们的前端视图能够及时地反映出数据的变动。