this.$set解决添加对象属性后，页面不显示效果的问题

项目场景：

写项目的时候由于项目需求需要给对象添加新的属性，但是添加属性后，在console面板上可以打印，但是页面视图上不显示对应效果，经网阅资料进行记录，以供参考

目录

项目场景：

原因分析：

解决方案：

 参阅资料：

---

---

原因分析：

这里涉及到一个概念，叫做响应式对象，普通对象设置了对象的访问属性：getter和setter后，成为一个响应式对象，响应式对象调用和修改属性需要对应用到get和set方法，如果添加或修改属性后不能正常在视图显示，那么就需要设置对象属性也是一个响应式对象，进而用到set方法解决

---

解决方案：

可以用到vue.set(obj,key,value)方法，也可以使用this.$set(obj,key,value)方法，虽然有本质区别，但是原理相同，此处使用this.$set方法

<template>
  <div>
    <el-card>{{ student }}</el-card>
    <el-button type="primary" @click="newData">点击显示新数据</el-button>
    <!-- 按钮监听点击事件绑定newData方法，newData方法里使用了set方法 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义要修改的数据源，可以是数组，对象
      student: {
        name: 'zs',
        age: 5,
        sex: 'male',
      },
    }
  },
  mounted() {
    this.student.score = 90 // 普通方法修改数据,控制台输出{ "name": "zs", "age": 5, "sex": "male" }，但是页面视图不显示
    console.log(this.student)
  },
  methods: {
    newData() {
      this.$set(this.student, 'score', 80) // set方法修改数据使新增的数据也成为响应式
      this.student = Object.assign({}, this.student) // 新增了响应式数据之后将整个对象重新拷贝赋值给this.student，之后页面可以正常显示新增数据
    },
  },
}
</script>

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

 点击按钮之前，在mounted里模拟普通对象新增数据score:90，console有输出，但是页面不显示

点击按钮之后，使用this.set方法新增数据score:80，页面正常显示

 

 

 参阅资料：

响应式对象是一个什么对象 - 哔哩哔哩点击进入查看全文>https://www.bilibili.com/read/cv4303259/vue中this.$set的用法_Stacey-TL的博客-CSDN博客_vue中this.$set从三个方面给大家说一下这个this.$set:1.this.$set实现什么功能，为什么要用它？2.怎么用它？3.应用场景1.this.$set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vuehttps://blog.csdn.net/qq_38687592/article/details/123477250