vue中为什么要用set • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue中，使用set的主要目的是为了在Vue响应式系统中正确地触发数据的变化。Vue的响应式系统是通过对数据对象进行劫持和观察来实现的，当数据对象的属性发生变化时，Vue能够自动更新视图。然而，Vue只能自动侦测到已存在的属性的变化，对于新添加的属性或通过数组索引进行的修改，Vue无法自动侦测到变化。在这种情况下，就需要使用set方法来手动通知Vue数据的变化。

set方法是Vue提供的全局工具函数，它接收三个参数：第一个参数是要修改的目标对象，第二个参数是要修改的属性名称或数组索引，第三个参数是要设置的新值。

使用set的场景主要有：

动态添加属性：当我们需要在已经创建的Vue实例上动态添加属性时，Vue无法自动侦测到这个变化。这时，我们可以使用set方法来手动添加属性，并告诉Vue该属性已经发生变化，以触发视图更新。
数组元素修改：当我们通过索引修改数组中的元素时，Vue无法自动侦测到这个变化。这时，也需要使用set方法来手动触发数据的变化。例如，我们可以通过set方法来修改数组的某个元素，并告诉Vue该元素已经发生了变化。

需要注意的是，set方法只能触发当前对象及其嵌套对象的响应式更新，对于嵌套在其他响应式对象中的对象，需要分别调用set方法来触发更新。

总结来说，Vue中使用set的目的是为了手动触发数据的变化，以确保Vue能够正确地对数据进行响应式更新。

1年前 0条评论

不及物动词

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

在Vue中使用set是为了保证响应式数据的更新能够被Vue所捕获和响应。下面是使用set的主要原因：

创建响应式属性：在Vue实例创建时，可以使用set方法动态地给对象添加属性。这样添加的属性会被转化为响应式属性，能够被Vue所追踪并进行相应的更新。
响应式属性的删除：使用delete关键字删除对象的属性时，Vue将无法追踪到该属性的变化，从而无法进行相应的更新。而使用set方法删除属性，则可以确保Vue能够正确追踪属性的变化。
数组的响应式更新：在Vue中，默认情况下，Vue能够监听到对象属性的变化，但是无法监听到数组元素的变化。因此，在Vue中对数组进行操作，比如使用push、pop、splice等方法修改数组，Vue无法监听到这些变化。为了解决这个问题，可以使用Vue.set方法或全局的set方法来更新数组。
动态添加全局的属性或方法：在Vue中，通常会将一些全局的属性或方法定义在Vue的原型上，以便全局访问。而当我们需要动态地添加一个属性或方法时，可以使用Vue.set方法或全局的set方法将其添加到Vue的原型上。
监听对象属性的变化：set方法可以配合watch属性，实现监听对象属性的变化。通过在watch属性中设置对应的属性名，当该属性发生变化时，Vue会自动调用指定的回调函数进行处理。

综上所述，使用set方法可以使Vue正确追踪并响应对象属性的变化，包括动态添加属性、删除属性、数组的修改以及监听对象属性的变化等。这样可以保证Vue的响应式机制能够正常工作，确保界面的更新能够正确反映数据的变化。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，使用set方法的主要目的是确保对数组或对象进行改变时，能够触发视图的更新。

在Vue中，Vue会劫持数据对象，通过使用Object.defineProperty或Proxy来追踪数据的变化。当数据对象发生改变时，Vue会自动更新相关的视图，以保持数据和视图的同步。然而，Vue无法追踪到以下类型的数据变化：

当添加或删除数组元素时：通过直接设置数组索引来操作数组，Vue无法检测到数据的变化。
当直接通过索引修改对象属性时：通过直接设置对象属性的索引来修改对象属性，Vue也无法检测到数据的变化。

因此，为了解决这个问题，Vue提供了set方法。

set方法的作用是在修改数组或对象时，通知Vue进行视图更新。Vue会使用该方法对数据进行劫持，以便能够捕捉到数据的变化并更新视图。

使用set方法的具体操作流程如下：

导入Vue和set方法：

import Vue from 'vue'
import { set } from 'vue'

定义要修改的数据：

const data = {
  array: [1, 2, 3],
  object: {
    name: 'John',
    age: 25
  }
}

使用set方法修改数据：

set(data.array, 0, 4) // 修改数组第一个元素
set(data.object, 'age', 30) // 修改对象的age属性

通过使用set方法，我们可以确保Vue能够追踪到数组和对象的变化，并自动更新相关的视图。

总结：
在Vue中使用set方法可以确保对数组或对象进行的修改能够被Vue检测到，从而触发视图的更新。这是因为Vue无法追踪到直接通过索引来修改数组元素或对象属性的变化，所以通过使用set方法可以解决这个问题。

1年前 0条评论