学习使用$set

学习使用$set

 

 当我们想给data中的person对象添加一个age属性时，点击“添加age属性”按钮，发现person对象已经添加了age属性，但是在视图中并没有更新

<template>
  <div >
    <label>姓名：</label>
    <input  v-model="person.name" />
    <br>
    <br>
    <label>年龄：</label>
    <input  v-model="person.age" />
    <br>
    <br>
    <a-button type="primary" @click = 'addAge'> 添加age属性 </a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: "张三",
      },
    };
  },
  methods: {
      addAge(){
          this.person.age = 15
          console.log(this.person);
      }
  },
};
</script>
<style scoped>
.inputBox {
  width: 200px;
}
</style>

 

　　

 

 

由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化

  person: {
        name: "张三",
        age:""
      },

如果一开始person对象中有age属性，那么点击“添加age属性”按钮可以更新视图

那么如何解决？

（1）使用this.$set(obj, key, value)/vue.set(obj, key, value)

    addAge() {
      //   this.person.age = 15
      this.$set(this.person, 'age', 15);
      console.log(this.person);
    },

　　

（2）通过Object.assign(target, sources)方法

    addAge() {
      this.person.age = 15;
      this.person = Object.assign({}, this.person);
      //   this.$set(this.person, 'age', 15);
      console.log(this.person);
    },

　　

两种方法都可实现下图中的视图更新

 

 

 

通过打印person对象发现这两种方式为对象添加属性之后，他的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新啦

 

之前                                                                                                                                                               之后