为什么 vue 中 v-model="this.data" 会报

最近遇到这么一个问题，在写 v-model="value" 属性时手误写成了 v-model="this.value" 然后发现页面没有报错但是双向绑定失效，找了很长时间发现多写了一个 this，这对于一个一年工作经验以上的程序员来说确实是不应该，不过既然有错误我们就需要看看为什么加了 this 就不可以呢，因为在模板赋值的时候是可以加 this 的，比如 <div>{{this.message}}</div>，那为什么双向绑定不能加 this 呢，我们知道其实 v-model 也是一个语法糖，比如在 input 输入框中它是由 v-bind 和 v-input 组成的一个双向绑定，来看代码：

<div id="app">
  <div>值：{{this.value}}</div>
  <input type="text" v-model="value">
  <!-- <input type="text" v-bind:value="value" v-on:input="value = $event.target.value" -->
  <!-- <input type="text" :value="value" @input="value = $event.target.value" -->
</div>

new Vue({
  el: "#app",
  data: {
    value: 'defaultValue'
  }
})

上面的三种写法都可以，因为 v-bind 和 v-on 都会把双引号中的内容当做一段 js 代码读取，v-bind 里面出现 this 其实没事也就是 v-bind:value="this.inputVal" 这么写也是没问题的，但是在 v-on 中如果这么写 v-on:input="this.inputVal = $event.target.value" 就不可以了因为这里面不能用 this 关键字会找不到 inputVal 这个属性，所以也就是说 v-model 的属性值中同样不能带有 this。以后小伙伴在使用双向绑定时一定要注意这一点。