vue中set是做什么的 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue中，set方法是用来修改data中的属性值的。它的作用是对Vue实例的属性进行响应式修改，从而触发视图的更新。

通常情况下，我们可以直接通过赋值的方式修改data中的属性值。然而，如果我们在修改属性时需要满足一些特定的条件或者需要进行一些额外的操作，就可以使用set方法。

set方法的使用方式如下：

this.$set(object, key, value)

其中，object是需要修改的对象，key是要修改的属性名，value是新的属性值。

需要注意的是，set方法只能用于Vue实例的根级属性或者响应式对象。如果我们想要监听到对象中某个嵌套的属性的修改，需要通过Vue.set或者this.$set来进行修改，以确保属性的响应式。

下面是一个示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        message: 'Hello Vue!'
      }
    };
  },
  methods: {
    changeMessage() {
      this.$set(this.obj, 'message', 'Hello World!');
    }
  }
};
</script>

在上述代码中，初始状态下obj对象的message属性的值为'Hello Vue!'。当点击按钮时，会调用changeMessage方法，将message属性的值修改为'Hello World!'。这时，视图中绑定的message属性会自动更新，显示新的值。

总结起来，Vue中的set方法是用来修改Vue实例中的属性值的，它可以使修改后的值响应式地更新到视图中。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue.js中，set是用来设置Vue实例的属性的方法之一。它的作用是在Vue实例中更新数据，并触发响应式更新。下面是关于Vue中set的几个重要方面：

设置响应式属性：Vue的响应式系统会追踪每个属性的依赖关系，并在属性被修改时自动更新相关的DOM。然而，当我们添加一个新的属性到已经创建的对象时，Vue无法自动追踪这个属性。这时候，就需要使用set方法来设置该属性，以让Vue能够监测到该属性的改变并相应地更新DOM。
对于数组的操作：set方法在数组中的使用有一些特殊之处。在Vue中，当我们通过索引修改数组中的某个元素时，Vue能够自动检测到这个操作并更新DOM。但是如果我们要添加或删除数组中的元素时，Vue无法自动追踪这个变化。这时候，就需要使用set方法来添加或删除数组中的元素，以保证Vue能够监测到这个变化并更新DOM。
设置嵌套属性：如果我们要修改一个对象中的嵌套属性，比如obj.a.b，直接修改obj.a.b是不会触发响应式更新的。这时候，就需要使用set方法来设置嵌套属性，以便Vue能够追踪到这个修改并更新相关的DOM。
异步更新：在某些情况下，我们可能需要在下一个事件循环时才能更新数据。这时候，可以使用Vue.nextTick方法来异步更新数据。在异步更新数据时，使用set方法可以确保Vue能够正确地追踪这个变化并更新DOM。
动态添加属性：有时候，我们可能需要根据用户的输入或其他条件来动态地添加属性到Vue实例中。这时候，可以使用set方法来动态地给Vue实例设置属性，并确保Vue能够追踪到这个变化并更新DOM。

总结：在Vue中，set方法用来设置Vue实例的属性，包括设置响应式属性、对数组进行添加或删除元素、设置嵌套属性、异步更新数据以及动态添加属性等。通过使用set方法，我们可以实现对Vue实例属性的动态修改，并且确保Vue能够正确地追踪这个变化并更新相关的DOM。

1年前 0条评论

worktile

Worktile官方账号

在Vue.js中，set是一个全局辅助函数，用于设置嵌套对象中的属性值，使其具有响应性。

在Vue中，当你定义一个响应式的对象时，Vue会通过劫持这个对象的属性，当属性的值发生变化时，Vue会立即更新相应的DOM。

然而，如果你直接使用obj[key] = value的方式修改对象的属性值，Vue无法检测到这个变化，导致无法触发视图的更新。

这时候，set函数就派上用场了。它可以通过改变对象属性的方式，让Vue能够正确地监听到属性的变化。

具体来说，set函数接收三个参数：

target：要设置属性的目标对象
key：要设置的属性名
value：要设置的属性值

通过调用set(target, key, value)函数，Vue会将target[key]的值设置为value。同时，Vue会通过触发响应系统，使相应的视图得到更新。

下面是set函数的使用示例：

import { set } from 'vue';

const obj = {
  name: 'John',
  age: 20,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

set(obj, 'name', 'Alice');  // 修改obj的name属性为'Alice'
set(obj, 'address.city', 'London');  // 修改obj.address的city属性为'London'

需要注意的是，set函数仅适用于Vue实例中的响应式数据，对于普通JavaScript对象无效。另外，当target不是响应式对象时，set函数将会返回false。

总结一下，set函数提供了一种正确地修改响应式对象属性的方式，使得Vue能够检测到属性的变化并更新相应的视图。

1年前 0条评论