Vue常见问题

1. v-model涉及和computed计算属性双向绑定失效的问题

v-model部分代码：

<el-switch v-model="editable"></el-switch>

计算属性部分代码：

computed:{
    editable(){
        return this.type.power==0?true:false
    }
  },

计算属性的这种写法只有get方法，没有set方法，无法对值进行设置。

改成如下写法：

computed:{
    editable:{
      get(){
        return this.type.power==0?true:false
      },
      set(val){
        if(val){
          this.type.power=0;
        }else{
          this.type.power
        }
      }
    }
  }

2. 页面自定义组件model绑定是对象的属性，属性不能双向绑定

现象：自定义组件v-model绑定的是对象的属性，但是在data里面这个对象没有声明这个属性。在初始化的时候对这个属性赋值，属性值不能双向绑定（具体内容：父组件能更新子组件emit出来数据，而父组件不能更新子组件的prop值）

解决方法：通过Vue.set(object, propertyName, value)给这个属性赋值，这个属性才能是响应式的。如：

this.$set(this.planMark1Detail, "FIN_MARK", 0);

原理：受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。另外发现不在data声明对象这个属性，也不给这个属性赋值，通过自定义组件选中值，能够双向绑定。猜想是vue内部做了处理，具体未知