vue中$set用法详解

下面我将为你详细介绍“vue中$set用法详解”。

什么是$set

$set是Vue.js提供的一个全局API，用于向响应式对象中添加一个属性，并确保这个新属性也是响应式的。这个全局API的使用方式如下：

Vue.set(target, key, value)

其中，target表示目标对象，key表示需要添加的属性名，value则表示需要添加的属性的值。

$set的使用场景

在Vue中，我们经常需要添加新的属性到响应式对象中。我们知道，如果一个对象在初始化的时候没有被observed（即没有被Vue.convert方法转化过），那么这个对象就不是响应式的，不能使用Vue.js提供的响应式API。如果我们现在要向这个对象添加一个属性，那么这个属性就不会被Vue.js所观察，不会自动更新视图。

为了解决这个问题，Vue.js提供了$set方法。当我们需要向一个非响应式对象添加一个属性的时候，我们可以使用Vue.set方法来让这个新属性变得响应式。

$set示例解析

下面我将通过两个示例来详细讲解$set的使用方法。

示例一：使用$set添加对象属性

假设我们有如下代码：

<template>
  <div>
    <h3>{{person.name}}</h3>
    <button @click="changeName"></button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        person: {
          age: 18,
          gender: 'male'
        }
      }
    },
    methods: {
      changeName() {
        this.person.name = 'Tom' //试图向一个非响应式对象中添加属性name
      }
    }
  }
</script>

在这个示例中，我们尝试向一个非响应式对象person中添加一个属性name，但是我们发现，页面并没有更新这个新属性。

这个问题可以通过使用$set方法来解决，代码如下所示：

<template>
  <div>
    <h3>{{person.name}}</h3>
    <button @click="changeName"></button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        person: {
          age: 18,
          gender: 'male'
        }
      }
    },
    methods: {
      changeName() {
        Vue.set(this.person, 'name', 'Tom')  //使用Vue.set方法添加响应式属性name
      }
    }
  }
</script>

在这个示例中，我们使用Vue.set方法，向person对象中添加了一个响应式属性name。这时候，我们再运行代码，就会发现新属性被成功更新至页面。

示例二：使用$set添加数组元素

假设我们有如下代码，用于添加一个数组元素：

<template>
  <div>
    <h3>{{languages}}</h3>
    <button @click="addLanguage"></button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        languages: ['JavaScript', 'Java']
      }
    },
    methods: {
      addLanguage() {
        this.languages.push('Python')  //试图向一个非响应式数组中添加元素
      }
    }
  }
</script>

在这个示例中，我们尝试向一个非响应式数组languages中添加一个元素，但是我们会发现，页面并没有更新这个新元素。

同样，这个问题也可以通过使用$set方法来解决，代码如下所示：

<template>
  <div>
    <h3>{{languages}}</h3>
    <button @click="addLanguage"></button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        languages: ['JavaScript', 'Java']
      }
    },
    methods: {
      addLanguage() {
        let newLanguage = 'Python'
        Vue.set(this.languages, this.languages.length, newLanguage) //使用Vue.set方法添加响应式新元素
      }
    }
  }
</script>

在这个示例中，我们使用Vue.set方法，向languages数组中添加了一个响应式新元素。这时候，我们再运行代码，就会发现新元素被成功更新至页面。