vue实例方法$set的相关使用

什么是$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"这种方式是不会改变视图的。