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

最新推荐文章于 2023-12-04 17:13:06 发布

原创最新推荐文章于 2023-12-04 17:13:06 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

bug记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的问题，即向对象添加新属性后，页面视图未更新。文章详细解释了响应式对象的概念，以及当普通对象新增属性后，为何需要使用this.$set方法确保属性变为响应式。通过示例代码展示了如何使用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有输出，但是页面不显示