vue中什么时候需要set属性 • Worktile社区

不及物动词

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

在Vue中，当需要更新响应式数据对象的属性时，可以使用Vue.set()方法来实现。通常情况下，我们不需要使用set方法来更新属性。

Vue.js会在实例化时自动将data对象中的所有属性转换成响应式的，这意味着当更新data对象中的属性值时，视图会自动更新。但是，当需要添加新的属性或者删除已有的属性时，Vue.js就无法自动追踪这些变化来实现响应式更新。

这时，可以使用Vue.set()方法来手动添加一个响应式的属性，或者使用Vue.delete()方法来删除一个属性。这对于处理动态添加属性或者删除属性的场景非常有用，例如在使用v-for指令遍历一个数组或者对象时，可以根据具体需求添加或者删除其中的元素。

下面是一个使用Vue.set()方法的示例：

// data对象
data: {
  items: []
},
methods: {
  addItem() {
    // 添加一个新的元素，并使之成为响应式的
    Vue.set(this.items, this.items.length, 'new item');
  }
}

在上述示例中，我们使用Vue.set()方法在items数组末尾添加一个新元素，并确保这个新元素是响应式的。这样，当我们调用addItem方法时，新元素会被添加到数组中，并且视图会自动更新。

需要注意的是，在使用Vue.set()方法时，第一个参数是目标对象，第二个参数是要设置的属性或者索引，第三个参数是属性的值。

综上所述，在Vue中，通常情况下不需要使用Vue.set()方法来更新属性，只有在添加新属性或者删除已有属性时才需要使用，以实现响应式更新。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，使用set属性的情况有以下几种：

动态添加属性: 当需要在Vue实例中动态添加一个新的属性时，需要使用set方法。例如：
```
Vue.set(vm.obj, 'newProperty', 123)
```
这样就可以在vm.obj对象中添加一个名为newProperty的属性，并且设定其初始值为123。
数组操作: 当需要对Vue实例中的数组进行添加或删除操作时，需要使用set方法。这是因为Vue无法检测数组的直接修改，例如使用索引或splice()方法进行添加或删除元素。下面是一些例子：
```
// 添加元素
Vue.set(vm.array, 1, 'newValue')

// 删除元素
Vue.delete(vm.array, 0)
```
这样可以确保修改后的数组能够触发响应式更新。
嵌套属性: 当需要修改Vue实例中嵌套对象的属性时，也需要使用set方法。例如：
```
Vue.set(vm.obj, 'nestedProp', {})
Vue.set(vm.obj.nestedProp, 'newProp', 456)
```
这样就可以在嵌套属性nestedProp中添加一个名为newProp的属性，并且设定其初始值为456。
Vuex状态管理: 在使用Vuex进行状态管理时，需要使用set方法来修改store中的属性值。这是因为Vuex的状态是响应式的，如果直接修改属性值，将无法触发更新。例如：
```
state.count = 1  // 错误的方式
Vue.set(state, 'count', 1)  // 正确的方式
```
这样可以确保修改后的状态能够实时更新到组件中。
异步更新问题: 在某些情况下，如果需要根据先前的状态来更新属性值，可以使用set方法来确保属性值的正确更新。例如：
```
this.$nextTick(() => {
  // 先前的状态
  let prevCount = this.count
  // 异步操作
  this.count++
  // 正确的方式
  Vue.set(this, 'count', prevCount + 1)
})
```
这样可以在异步更新结束后，根据先前的状态正确更新属性值。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，当你需要更改对象或数组的属性时，通常情况下是不需要使用set方法的，Vue会自动追踪数据的变化并更新DOM。

然而，当你需要更新对象或数组中的属性时，且该对象或数组是在Vue实例创建之前就存在的，这时就需要使用set方法来告诉Vue对象的属性发生了变化，从而触发视图的更新。

具体情况有以下几种：

在data中定义的对象/数组中添加新的属性/元素。
例如，当你想向data中的对象添加一个新的属性时，如果直接使用赋值的方式添加，Vue是无法检测到对象的变化的。这时，你需要使用Vue.set或this.$set方法来添加属性。

Vue.set(object, key, value)
// 或者
this.$set(object, key, value)

例如：

// Vue实例创建前
const data = { name: 'Tom' }
// 创建Vue实例
const vm = new Vue({
  data() {
    return {
      obj: data
    }
  }
})

// 添加新属性
Vue.set(data, 'age', 20)
// 或者
this.$set(data, 'age', 20)

在对象/数组中修改已有的属性/元素。
当你需要修改data中对象或数组中的属性时，如果直接对属性进行赋值，Vue也无法检测到属性的变化。这时，你需要使用set方法来告知Vue该属性发生了变化。

object[key] = value
// 或者
this.$set(object, key, value)

例如：

// Vue实例创建前
const data = { name: 'Tom' }
// 创建Vue实例
const vm = new Vue({
  data() {
    return {
      obj: data
    }
  }
})

// 修改属性值
data.name = 'Jerry'
// 或者
this.$set(data, 'name', 'Jerry')

总结：当你需要操作data中对象或数组的属性时，如果这个属性是在Vue实例创建之前就存在的，你需要使用set方法来通知Vue该属性发生了变化，从而触发视图的更新。

1年前 0条评论