vue.set-Vue.set()和vm.$set()参数

vue.set-Vue.set()和vm.$set()参数

Vue.set()和vm.$set()参数详解

详细介绍Vue.js中的Vue.set()和vm.$set()参数，分别从使用方法、作用、参数含义、示例、注意事项和实践等方面进行阐述，帮助读者更好地理解和应用这两个方法。

使用方法

Vue.set()和vm.$set()都是用来在Vue实例中设置响应式属性的方法。它们的使用方法非常简单，只需要传入要设置的对象、属性名和属性值即可。例如：

```javascript

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

// 或

this.$set(this.obj, 'newProp', 123)

这样就可以在obj对象中动态添加一个名为newProp的属性，并且使其成为响应式的。

作用
Vue.set()和vm.$set()的作用是在Vue实例中动态添加或修改属性，并且确保这些属性是响应式的。在Vue中，如果直接给对象添加新属性，这个属性将不会被响应式系统追踪，因此无法触发视图的更新。而使用Vue.set()和vm.$set()可以解决这个问题，确保新添加的属性也能够触发视图更新。
参数含义
Vue.set()和vm.$set()方法的参数分别为：要设置的对象、属性名和属性值。其中，个参数是要设置的对象，第二个参数是属性名，第三个参数是属性值。这些参数都是必填的，缺一不可。
示例
下面通过一个简单的示例来演示Vue.set()和vm.$set()的使用方法：
```javascript
new Vue({
  data: {
    obj: {}
  },
  created() {
    this.$set(this.obj, 'newProp', 123)
  }
})

在这个示例中，我们在Vue实例的created钩子函数中使用了vm.$set()方法，动态给obj对象添加了一个名为newProp的属性，并赋值为123。

注意事项

在使用Vue.set()和vm.$set()方法时，需要注意一些事项。这两个方法只能用于Vue实例中的响应式对象，如果尝试在普通对象上使用这两个方法，将会报错。不推荐在模板或计算属性中使用Vue.set()和vm.$set()方法，因为这些场景通常可以通过数据驱动视图来解决。

实践

实践是在需要动态添加属性并确保响应式的情况下使用Vue.set()和vm.$set()方法。比如在组件的生命周期钩子函数中、异步更新数据时、或者需要动态生成属性名的情况下，都可以使用这两个方法来保证属性的响应式。

总结归纳

Vue.set()和vm.$set()是Vue.js中用来动态添加属性并确保响应式的方法。它们的使用方法简单，作用是确保动态添加的属性能够触发视图更新，参数含义明确，示例代码清晰，注意事项和实践也为我们提供了使用这两个方法时需要注意的事项和建议。读者可以更好地理解和应用Vue.set()和vm.$set()方法。

（本文来源：nzw6.com）