Vue.set 全局操作简单示例

Vue.set()方法是Vue.js提供的全局操作，用于给Vue实例动态添加属性，并保证新添加的属性能够响应式地触发视图更新。以下是一个关于Vue.set()的攻略：

简介

Vue.set()的语法如下：

Vue.set(object, key, value)

其中：

• object：Vue实例的一个数据对象
• key：新添加的键
• value：新添加的键对应的值

示例

示例1

给一个数组添加新元素并保证响应式。

假设有如下Vue实例：

var vm = new Vue({
    el: '#app',
    data: {
        list: ['a', 'b', 'c']
    }
})

如果我们尝试直接给list添加新元素，如下所示：

vm.list.push('d')

此时，Vue框架不会自动检测到list的改变，也就不会更新视图。为了让Vue框架能够响应式地更新视图，我们需要使用Vue.set()方法，如下所示：

Vue.set(vm.list, 3, 'd')

这里，我们通过Vue.set()方法给list添加了一个新元素'd'，并指定它的索引为3。这样，一旦添加完成，Vue框架就会检测到list的变化，并触发视图更新。

示例2

给一个对象添加新属性并保证响应式。

假设有如下Vue实例：

var vm = new Vue({
    el: '#app',
    data: {
        obj: {
            name: 'Alice',
            age: 18
        }
    }
})

如果我们尝试直接给obj添加新属性，如下所示：

vm.obj.weight = 50

同样，Vue框架不会自动检测到obj的改变，也就不会更新视图。为了让Vue框架能够响应式地更新视图，我们需要使用Vue.set()方法，如下所示：

Vue.set(vm.obj, 'weight', 50)

这里，我们通过Vue.set()方法给obj添加了一个新属性weight，并指定它的值为50。这样，一旦添加完成，Vue框架就会检测到obj的变化，并触发视图更新。

总结

通过以上两个示例，我们可以发现，Vue.set()方法的作用是向Vue实例的响应式数据对象中，动态地添加属性或数组元素，并保证它们的变化能够触发视图更新。这在Vue.js开发中是十分常见的一个操作。