vue中$set用法详细讲解

╰+攻爆jí腚メ 2023-10-08 21:55 15阅读 0赞

### 1、为什么要用set？ ###

在vue中，并不是任何时候数据都是双向绑定的。

在官方文档中，有这样一段话，如下：

![5b93254a2b45ef4d3924bbf1223025fa.png][]

从文档得知，当**数据没有被双向绑定**的时候，我们就需要使用set了

2、set用法

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

- this.$set(原数组, 索引值, 需要赋的值)

length的问题还需要用splice方法。

- vm.items.splice(newLength)

### 3、什么时候使用set？ ###

> set为解决双向绑定失效而生，我们只需要关注什么时候双向绑定失效就可以了。

笔者看完了官方文档以后，总结了一下，**只要值的地址没有改变，vue是检测不到数据变化的**。

共有下面三种情况：

1.当你利用索引直接设置一个数组项时，例如：vm.items\[indexOfItem\] = newValue

2.当你修改数组的长度时，例如：vm.items.length = newLength

3.由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除

此处针对第三点做一些说明：

var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的

从上面的代码我们可以知道vm.b不是响应式的，简单的来说，如果对象中原来没有这个key，新增的key是无法双向绑定的。

当然这里我们同样可以用set去解决这个问题：

vm.$set(vm.userProfile, 'age', 27)

如果我们添加的属性很多条，可能就需要写一个循环来多次set。当然你也可能使用Object.assign，这里有一些需要注意的地方。

如果你想添加新的响应式属性，下面这样写是不行的。

Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

下面这样才是正确的。

vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

[5b93254a2b45ef4d3924bbf1223025fa.png]: https://img-blog.csdnimg.cn/img_convert/5b93254a2b45ef4d3924bbf1223025fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python中set的用法介绍

![9e5f6d53dc9bb4317eb0984f639d523d.jpeg][] python 的[集合][Link 1]类型和其他语言类似, 是一个无序不重复元素集,

╰半橙微兮°/ 2024年03月31日 10:27/ 0 赞/ 93 阅读

相关 Python中set的用法介绍

![9e5f6d53dc9bb4317eb0984f639d523d.jpeg][] python 的[集合][Link 1]类型和其他语言类似, 是一个无序不重复元素集,

清疚/ 2024年03月31日 10:27/ 0 赞/ 76 阅读

相关 Vue监听属性详细讲解

文章目录定义要监听的属性定义 watch 修改监听的属性值监听数组变化监听对象变化监听计算属性变化监听事件变化

妖狐艹你老母/ 2024年03月22日 14:21/ 0 赞/ 65 阅读

相关 JsonArray用法讲解

[Java][]之JsonArray用法讲解在Java中，经常需要使用Json格式的数据结构进行数据传递和交换。JsonArray是Json中的一个数据类型，本文将讲解

小咪咪/ 2023年10月12日 11:22/ 0 赞/ 90 阅读

相关 vue中$set用法详细讲解

1、为什么要用set？在vue中，并不是任何时候数据都是双向绑定的。在官方文档中，有这样一段话，如下： ![5b93254a2b45ef4d3924bbf1223

╰+攻爆jí腚メ/ 2023年10月08日 21:55/ 0 赞/ 16 阅读

相关 vue中的keep-alive的用法详细讲解

问题描述（什么是keep-alive） keep-alive顾名思义，保持活跃。保持谁活跃呢？首先我们知道，因为vue就是组件化编程，一个.vue文件就是一

墨蓝/ 2023年10月07日 00:43/ 0 赞/ 10 阅读

相关 Vue生命周期流程图（详细讲解）

最近在看Vue的生命周期，就把各个流程整理一篇内功心法观察各个阶段虚拟dom树和真实dom树的渲染情况，每一个组件或者实例都会经历一个完整的生命周期，大体总共分为三个阶段

拼搏现实的明天。/ 2023年10月06日 14:49/ 0 赞/ 35 阅读

相关 python中集合set用法手册

1.集合的创建第一种方式创建 set 类型 >>> print(type(set1), set1) <class 'set

淩亂°似流年/ 2022年02月20日 07:41/ 0 赞/ 320 阅读

相关 Python入门之集合set详细讲解

一、集合的创建 1. 集合(set)里面的元素是不可重复的 s = {1,2,3,1,2,3,4,5} print(s) print(type(s)

柔情只为你懂/ 2021年12月15日 10:34/ 0 赞/ 445 阅读

相关 Vue路由（vue-router）详细讲解指南

Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上

淩亂°似流年/ 2021年07月26日 19:47/ 0 赞/ 326 阅读