Vue.set()详解

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

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值。

• 用法：

  向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

  注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

vm.$set 是全局 Vue.set 的别名。

代码示例

const app = new Vue({
    el: "#app",
    data: {
        list: ["apple", "orange", "banana"],
        info: {
            name: "lisi",
            age: 12
        }
    }
})
// Vue.set(app.list, 1, "lemon")
app.$set(app.list, 1, "lemon")

// Vue.set(app.info, "gender", "female")
app.$set(app.info, "gender", "female")

<div id="app">
    <ul>
        <li :key="item" v-for="item in list">{{item}}</li>
    </ul>
    <div v-for="item in info">
        <div>{{item}}</div>
    </div>
</div>

无论是使用 Vue.set 或 app.set 得到的结果总是一样的

我们可以使用这种方法来响应式的修改某个列表或对象

或者说要想响应式的修改某个列表或对象只能使用这种方法，否则修改无效