vue给this中对象属性赋值的坑

其实也不算坑，只是我一直在这跌倒

问题描述

• 企图给this.form.warehouseIds赋一个从接口拿到的字符串，它是下拉框的值，所以期望效果是this.form.warehouseIds需要时响应式的
• 可以如果直接使用this.form.warehouseIds=data（假设data时接口返回的值）那么视觉效果上下拉框时不可操作的状态，绑死了

原因

• 层级太深，直接赋值绑定效果差？
• warehouseIds之前不存在于this.form上，所以直接绑定是非响应式的

解决方法

• 老老实实使用this.$set(form,"warehouseIds",data)，$set似乎起到了监听的作用
• 或者是

  this.form = {
      ...form,
      warehouseIds: data
  }

$set需要知道的

• vm.$set(target,key,value)
• vm.$set()在new Vue()时就被注入到Vue的原型上。
• 存在背景：在vue中，只有data中已存在的属性才会被observe为响应式数据，如果你是新增的属性则不会成为响应式数据。因此vue提供了vm.$set()来解决这个问题。
• 源码逻辑：
  1. 类型判断
  2. target为数组：调用splice方法
  3. target为对象，且key不是原型上的属性处理：直接修改
  4. target不能时Vue实例，或者Vue实例的根数据对象，否则报错
  5. target是非响应式数据时，按照普通对象添加属性的方式来处理
  6. 重点： target为响应式数据，且key为新增属性，key会被设置为响应式，并手动触发其属性值的更新
• 总结：
  • 当target为数组：调用splice方法实现
  • 如果target是对象，会先判断属性是否存在，对象是否是响应式