记我的第一篇

好久之前就想写点东西，但因为各种原因，找不到好的思路来写，既然没思路，那就一边写一边找思路吧
这第一篇就记录一下最近踩到的坑
1、最近的一个是昨天，一个vue2的项目，一个dialog弹窗里面，有一个select下拉框，一个文本域的input输入框，大概是这样：

` <el-select @change="change">
    <el-option
    v-for="item in remarkOption"
    :key="item.value"
    :label="item.label"
    >
    </el-option>
    </el-select> 
    <el-input type="textarea" v-model="form.remark"></el-input> 
  `
  select选择之后触发change事件，change事件会去修改input框里的值
  `
  change(value) {
      this.form.remark = value
  }
  `

  按理说改完之后，我还能再去input框里面去手动输入或者删除文本框里面的内容
  但是吧，改不了
  第一反应：属性绑错了？看了下v-model，没错，又看了下change事件，修改的值也没错，确实是修改到了，也确实把
  select选择的选项给填到了input框里
  排查了一下，发现他是这么写的

，

  `
  data() {
      return {
          form:{}
      }
  }
  `

， remark是对象新加的属性，不是响应式，所以导致我一直修改都不成功 然后我就在data里把remark属性定义了一下，自测了一下，可以修改了，没问题了，推测试，测试测了跟我说不行，我过去看了下， 没刷新，好，刷新了，第一次选择，修改，没问题，然后提交，提交之后，又打开弹窗，去改，好家伙，改不了了，就跟第一次没定义属性一样，我人麻了，大脑空了，从绑定上来看，没问题了，当时真不知道问题出在哪里，就在那里一直点，一直console， 后来又捋了一下，为什么第二次会改不了，是不是在提交后响应式丢失了还是什么原因 发现了他的弹窗的cancel里有这么一行代码 ， cancel() { this.form = {} } ， 我真的^&^&%^$%&*^ 总结一下：第一次：vue2中的对象新增的属性是不会有响应式的，第二次：把data中定义的给改了，其实就相当于是又重新定义了一次from属性，跟第一次其实类似，相当于，第一次定义完之后是formA，在data中定义的formA.remark，是响应式的，但是cancel中重新定义了一下form，等于是fromB了，formB中是没有remark属性的，所以哪怕我再在change事件中去给form添加属性也是徒劳。