什么是$set
VUE实现双向数据绑定的原理是利用了Object.defineProperty() 这个方法重新定义对象获取属性值(get)和设置属性值(set)的操作,但是受ES5限制,Vue.js 不能检测到对象属性的添加或删除,给对象添加新的属性时并不会经过上述的过程,因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。此时就会出现数据变化,但是页面未渲染的情况。为了实现对象属性变化,触发视图更新的时候就需要使用$set来对对象的属性进行一个设置。
假设一个对象obj = {name:“abc”, age: 18} 直接添加属性obj.address= “nanjing” 此时是不会进行视图更新的
$set语法:
this.$set(obj,key,value);
示例:
<template>
<div id="app">
<div>姓名:{{ info.name }}</div>
<div>年龄:{{ info.age }}</div>
<div>地址:{{ info.address }}</div>
<button @click="handleSet">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
info: {
name: "abc",
age: 18,
},
};
},
methods: {
handleSet() {
this.$set(this.info, "address", "nanjing");
},
},
};
</script>
这里通过this.$set(this.info,“address”,“nanjing”); 这种方式可以使得视图更新,但是如果仅仅通过this.info.address = "nanjing"这种方式是不会改变视图的。