『前端日志』Vue+element-ui 输入框不显示输入数据的问题

问题：

如图，往输入框中输入了’abc’，但输入框并不显示，而alert出来的输入框的值为’c’

html和js代码(这是在element-ui在线编辑器里写的代码，请自行修改)：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-input v-model="a.c" placeholder="请输入内容"></el-input>
  <el-button @click="button">BTN</button>
</div>

var Main = {
  data() {
    return {
      a: {
      b:''
    }
    }
  },
  methods: {
    button () {
      alert(this.a.c)
    }
  },
  created () {
    this.a.c = ''
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

分析原因(个人见解！)：

首先了解一下Vue.js的深入响应式原理：Vue深入响应原理
以及该原理用到的方法：Object.defineProperty()

element-ui官网对input的描述是：
Input 为受控组件，它总会显示 Vue 绑定值。通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

而v-model的定义是：
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

可以看到我输入的值的确绑定到了data的对象a的属性c上，这完成了一个方向的绑定，但由于我给对象a添加的属性c默认为数据描述符(详见Object.defineProperty()链接)，所以属性c没有getter和setter属性，vue就无法监听到属性c的变化，也就无法将属性c的值绑定回input控件了，因此实际上输入操作只完成了单向数据绑定，输入框不显示数据，但属性c还是会被改变

以上是个人理解，不一定正确！