vue $set，解决数组对象新增属性，视图未渲染问题

一、使用场景

当你给一个数组对象中添加一个新的属性时，需使用$set主动更新视图
如果直接赋值添加你会发现，虽然可以新增属性，但是不会触发视图更新

二、使用方法

方法：this.$set(this.data,‘key’,value)
一共有三个参数
第1个this.data：你想要赋值的对象
第2个‘key’：对象中，新增的属性名
第3个value：对象中，新增的属性名对应的属性值
白话：也就是第2个和第3参数组成一个键值对，放入第1个参数(对象)里

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

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

<template>
  <div class="goodsList">
    <div class="goodsItem" v-for="(item, index) in goodsList" :key="index">
      <p class="title">名称：{{ item.title }}</p>
      <p class="subtitle">副标题：{{ item.subtitle }}</p>
      <p class="price">价格：{{ item.price }}</p>
    </div>
    <button @click="addGoodsPrice">点击添加商品价格</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          title: '笔记本A',
          subtitle: '轻薄、便携',
        },
        {
          title: '笔记本B',
          subtitle: '16G内存、8核',
        },
      ],
    }
  },
  methods: {
    // 添加商品列表项的价格
    addGoodsPrice() {
      this.goodsList.map((item, index) => {
        const price = 8098 + index * 100 // 随便定义的价格
        // item.price = price // 直接赋值-错误，发现视图未更新
        this.$set(item, 'price', price) // 通过$set，赋值-正确视图会更新
      })
      console.log(this.goodsList)
    },
  },
}
</script>

三、总结

在项目中，这是一个经常会遇到的坑；
如果发现属性已经增加了，但视图没有渲染，你就要想想是不是要用$set去解决了

---

你可能感兴趣的文章：

• vue中组件间通讯的8种方法
• vue.config.js配置，公司实战项目
• v-if与v-show的区别、使用场景