this.$set的正确使用

我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性

<!--
 * @Descripttion: this.$set的正确使用
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-05-18 14:05:13
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-04-25 11:20:51
-->

<template>
  <div>
    <button @click="setMessage">添加属性</button>
    {{ student.name }}
    <input type="text" v-model="student.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: "张三",
      },
    };
  },
  methods: {
    setMessage() {
      this.student.age = 15;
      // this.$set(this.student,'age',15)
      // this.student = Object.assign({},this.student)
      console.log(this.student);
    },
  },
};
</script>

<style  scoped lang="less">
</style>

当我们点击按钮，为student添加一个age属性，看看视图层是否能够更新

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

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

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

1. 使用this.$set(obj, key, value)

this.$set(this.student,'age',15)

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

this.student = Object.assign({},this.student)

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