简单讲一下Vue中的$set

大家好,我是大帅子,今天跟大家讲一下Vue中的$set吧, 其实Vue中的$set其实讲的很明确, 我们今天就跟着官网来吧

1. 对象

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

例子

<template>
  <div>
    <div>{{ dsz }}</div>
    <div>{{ list }}</div>
    <h4><button @click="add">对象添加</button></h4>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      dsz: {
        name: 'rose'
      }
    }
  },
  methods: {
    add() {
      this.dsz.age = 18
    }
  }
}
</script>

<style scoped>

</style>

这个时候我们的数据就不是响应式的了,虽然我们的工具检测到了,但是我们的视图却没有更新

这个时候我们就需要用到$set,第一个参数就是对象名,第二个参数就是对象的键,第三个就是对象的值

    add() {
      this.dsz.age = 18
      this.$set(this.dsz, 'age', 18)
    }

这个时候我们的数据就双向绑定成功了

数组

数组其实就是一个道理

list: [1, 2, 3, 4, 5, 6, 7, 8]

  addd() {
      this.list[0] = 100
 }

这个时候我们直接切修改的话,是修改不成功的,这个时候我们就需要用$set,

// this.$set(this.object/array, propertyName/index, value)

this.$set(this.list, 0, 100)

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!