Vue基操之$set()方法

发表于 | 分类于

Vue中的$set()

Vue给data对象新增属性，并触发视图更新。

1
2
3
4
5
6
7
8
data () {
	return {
		student: {
			name: '',
			sex: ''
		}
	}
}

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新。

1
2
3
mounted () {
	this.student.age = 24
}

原因是：受ES5的限制，Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化实例时将属性转为getter/setter,所以属性必须在data对象上才能让Vue.js转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性，又可以触发视图更新。

其写法：

1
2
3
mounted () {
	this.$set(this.student, 'age', 23)
}