Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)

LinMeng 43 0 0

this.$set(obj,key,value)

  • 应用场景:为data中的某一个对象添加属性
    <template>
    <div>
      <button @click="addProps">添加属性</button>
      {{ hun.name }}
      <input type="text" v-model="hun.age">
    </div>
    </template>
    
**当我们点击按钮为hun添加age属性时,视图层不能够及时更新,控制台中可以看到新添加的属性,这是因为受js的限制,vue.js不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用getter和setter方法,所以该属性必须是存在在data中,视图层才会响应该数据的变化**
- 解决方法如下:

1. 使用this.$set(obj, key, value)/vue.set(obj, key, value)
2. 通过ES6的Object.assign(target, sources)方法
**通过这两种方式为对象添加属性之后,hun的对象身上多了get和set方法,再次操作该属性的时候,就会引起视图的更新**

预览图
收藏
评论区