Vue 6 ，Vue中的this.$set()使用教学，详细过程（Vue项目中this.$set()的妙用）

北城笑笑

已于 2024-11-18 18:44:29 修改

阅读量5.5w

点赞数 33

分类专栏： Vue 文章标签：前端 vue.js

于 2022-11-15 17:40:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/127869019

版权

Vue 专栏收录该内容

88 篇文章

订阅专栏

本文详细介绍了Vue.js中的this.$set()和this.$delete()方法，用于在响应式对象和数组中添加、修改和删除属性，确保视图的自动更新。讲解了在对象和数组操作中的具体应用，以及注意事项，帮助开发者更好地理解Vue的响应式原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在Vue.js中，this.$set()是Vue实例this.someProperty = someValue来为Vue实例的属性赋值时，Vue会自动将该属性设置为响应式的，这样当属性的值变化时，相关的视图会自动更新。

一. 对象

对象，修改和新增

定义数据对象：
obj: { name: "小明", age: 18, },        

基本语法：
this.$set(需要改变的对象，"需要改变的对象属性"，"新值")

1. 对象修改

this.$set(this.obj, "name", "小刘"); 

控制台输出：obj: { name: "小刘", age: 18, },

2. 对象新增

this.$set(this.obj, "hobby", "study");

控制台输出：obj: { name: "小明", age: 18, hobby: "study"},

3. 对象新增未知属性（这里的item是传递的参数，不带引号，"reading"是参数值）


this.$set(this.obj, item, "reading");

二. 数组

数组，修改和新增

定义数组包对象：
arr: [                                           
  { name: "小王", age: 18 },
  { name: "小张", age: 20 },
 ],

定义普通数组：       
twoArr: [11, 22, 33, ],                          

基本语法：
this.$set(需要修改的数组，需要修改的数组下标，{ "要修改的数组对象，一个/多个" })

1. 数组修改

修改数组对象：
this.$set(this.arr, 1, { name: "小王", age: 19 });
          
控制台输出：arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],

修改普通数组：
this.$set(this.twoArr, 0, 99);    
   
控制台输出：twoArr: [99, 22, 33, ],

2. 数组新增

（1）首先需要获取新增的数组长度

let reslg = this.arr.length;

（2）然后添加在数组末尾

this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);

控制台输出：
arr: [ 
        { name: "小王", age: 18 },
        { name: "小张", age: 20 },
        { name: "小紫", age: 18 },
     ],

三. this.$delete

同理，执行删除操作时，对象或数组不更新时，可以使用this.$delete

基本语法：

this.$delete(this.obj, "name")

this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete 可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。

四. 注意事项

使用时，注意双引号（""）的引用

五. 本章总结

this.$set 是Vue中的一个实例方法，用于在响应式对象上设置新的属性或修改已有的属性，并确保这些属性也是响应式的。使用this.$set 可以解决Vue响应式系统的一个限制，即无法检测到通过索引直接设置数组元素或通过Object.defineProperty添加的属性的变化，所以通过this.$set 方法，可以显式地告诉Vue，某个属性的值已经发生了变化，从而触发视图的更新。