this.$set使用场景和用法

原创已于 2025-04-07 11:31:59 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-13 17:42:06 首次发布

这篇文章介绍了Vue中$set方法的使用场景，当对象属性改变但视图未实时更新时，如何通过$set动态更新数据并确保视图同步。通过实例演示了如何在组件中正确运用$set来实现属性修改后的视图刷新。

$set 使用场景

动态给对象添加或者删除属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到。

用法

this.$set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

示例（vue）

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item}}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" },
      ],
    };
  },
  mounted() {
    // this.list[0] = { id: 1, name: "first"}//数据更新，但视图未更新
    // console.log( this.list[0]);

    // this.$set(this.list[0], "name", "first"); //**数据更新,视图更新（更改item里的某个属性值）
    // console.log(this.list[0]);
    
    this.$set(this.list, 0, { id: 4, name: "first", age:12}); //**数据更新,视图更新（更改item的所有属性的值）
    console.log(this.list[0]);
  },
};
</script>

<style></style>