vue的set方法

Vue的set方法是用来设置响应式数据的方法，它可以在Vue实例中动态地添加或修改属性，并确保这些属性是响应式的。

在Vue中，当一个对象被添加到Vue实例的data中时，Vue会将其转换为响应式的对象。这意味着当我们修改这个对象的属性时，Vue会自动更新视图。

不过，当我们需要动态地添加或修改对象的属性时，Vue不能够自动地将这些属性转换为响应式的。这时就需要使用Vue的set方法来实现。

set方法接受三个参数：target，key和value。target是要添加或修改属性的对象，key是要添加或修改的属性名，value是要设置的属性值。

使用set方法可以实现以下功能：

1. 动态添加属性：可以通过set方法在Vue实例的data中动态地添加属性。例如，可以通过set方法在data中添加一个新的属性，然后在模板中使用这个属性。

2. 动态修改属性：可以通过set方法在Vue实例的data中动态地修改属性的值。例如，可以通过set方法修改data中已有属性的值，然后Vue会自动更新视图。

3. 动态添加响应式属性：使用set方法添加的属性会被Vue转换为响应式的属性，这意味着当这个属性的值发生变化时，Vue会自动更新视图。例如，可以通过set方法在data中添加一个新的属性，并在模板中使用这个属性，当这个属性的值发生变化时，视图会自动更新。

set方法只能用于添加或修改响应式数据，不能用于添加或修改非响应式数据。如果需要添加或修改非响应式数据，可以直接使用JavaScript的赋值语句。

示例代码如下：

“`javascript

// 创建Vue实例

var vm = new Vue({

data: {

message: 'Hello Vue!'

}

});

// 动态添加属性

Vue.set(vm.$data, 'newProp', 'New Property');

console.log(vm.newProp); // 输出：'New Property'

// 动态修改属性

Vue.set(vm.$data, 'message', 'Hello Vue Updated!');

console.log(vm.message); // 输出：'Hello Vue Updated!'

// 动态添加响应式属性

Vue.set(vm.$data, 'dynamicProp', 'Dynamic Property');

console.log(vm.dynamicProp);// 输出：'Dynamic Property'

// 修改响应式属性的值

vm.dynamicProp = 'Updated Dynamic Property';

console.log(vm.dynamicProp); // 输出：'Updated Dynamic Property'

“`

在上面的示例代码中，第一创建了一个Vue实例，并在data中定义了一个message属性。

然后使用Vue的set方法动态地添加了一个新的属性newProp，并在控制台输出了这个属性的值。

接下来使用set方法修改了message属性的值，并在控制台输出了修改后的值。

最后使用set方法动态地添加了一个响应式属性dynamicProp，并在控制台输出了这个属性的值。

动态添加的属性和修改的属性都会被Vue转换为响应式的属性，所以当这些属性的值发生变化时，Vue会自动更新视图。