vue 什么时候要set • Worktile社区

worktile

Worktile官方账号

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

当你需要在Vue对象中新增一个属性时，你需要使用set方法来添加新属性。这是因为Vue在创建实例时会对其进行响应式处理，只会对实例中已存在的属性进行响应式跟踪。如果直接通过赋值的方式新增属性，Vue无法正确地追踪这个属性的变化，导致该属性无法正常的触发视图更新。

例如，假设你有一个data对象：

data: {
  name: 'John',
  age: 20
}

你想在这个对象中新增一个属性'message'，你可以使用set来实现：

this.$set(this.data, 'message', 'Hello')

这样，在视图中可以正确地显示message的值。

例如，当你修改数组中的某个元素时，可以使用set来触发视图更新：

this.$set(this.array, index, newValue)

这样，Vue会重新渲染数组，并且正确显示修改后的元素。

总而言之，当你在Vue中需要新增属性或更新数组/对象中的元素时，需要使用set方法来确保数据的响应式。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，使用set方法主要是在以下几种情况下：

在Vue实例中，通过$set方法添加响应式属性：Vue的响应式系统是通过劫持对象的getter和setter来追踪变化的。但是当一个对象被创建后，后续添加的属性是不会被劫持的。如果要在运行时动态地添加属性并确保其响应式，就需要使用$set方法。

Vue.set(vm.obj, 'newProp', 123);

Vue.set(vm.array, index, newValue); // 用新值替换数组中指定位置的元素

当在一个已经创建的对象上对一个已存在的属性赋值时，这个属性的响应性会被触发。但是对于新增的属性，Vue无法检测并追踪其变化。在这种情况下，需要使用$set方法。

vm.obj.newProp = 123; // 无法触发响应式
Vue.set(vm.obj, 'newProp', 123); // 这样可以触发响应式

在使用Vue组件时，在子组件中通过props接收父组件传递的数据，这些数据默认是不可变的。如果希望在子组件中修改这些数据，并且保持响应性，则需要使用$set方法。

props: {
  obj: {
    type: Object,
    required: true
  }
},
methods: {
  updateProp() {
    this.$set(this.obj, 'newProp', 123);
  }
}

Vue.directive('my-directive', {
  bind(el, binding) {
    Vue.set(binding.value, 'newProp', 123);
  }
});

1年前 0条评论

不及物动词

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

在Vue中，使用set方法是为了确保响应式属性的更新能够被Vue监听到。通常，在以下场景中需要使用set方法：

添加新的属性：当我们在应用程序运行时需要动态地添加一个新的属性到一个已有的对象上时，Vue无法检测到这个变化，因为Vue在初始化时会对对象的属性进行劫持，只有已经存在的属性才能被Vue的响应系统追踪到。这时就需要使用Vue.set方法来添加属性，它会将新属性进行响应式处理。
删除属性：与添加属性相反，当我们需要删除一个对象上的属性时，同样需要使用Vue.delete方法来确保删除的属性也能够被Vue监听到。
数组索引修改：当我们通过修改数组的索引来修改数组的某一项时，Vue是无法自动检测到这个变化的。这是因为Vue不能检测到索引的变化。因此，如果我们需要修改数组的某一项，并希望变化被Vue监听到，就需要使用Vue.set方法或者splice方法来实现。

具体的操作流程如下：

//在已有的对象上添加一个新属性
Vue.set(obj, 'newProperty', 'value');

//从对象上删除一个属性
Vue.delete(obj, 'propertyName');

//通过修改索引来修改数组的某一项
//使用Vue.set
Vue.set(arr, index, newValue);

//使用splice方法
arr.splice(index, 1, newValue);

需要注意的是，set方法只能用于响应式对象，而delete方法和splice方法可以用于响应式对象和数组。并且，在使用set方法时，被修改的对象需要事先被Vue实例所观察，否则无法进行响应式处理。

1年前 0条评论