为什么大公司面试官老爱聊底层之v-model原理

v-model原理

vue.js中我们也没少用v-model，知道怎么去用，但是却不知其实现底层。
其实谈陌生有很熟悉，那就了解下其底层实现原理吧。

实际上v-model是vue的一个语法糖，一个是v-bind去单项绑定vue实例里面的data数据，然后再通过各种事件比如@change @input等去进行触发事件修改实例数据的值，如果在vuex中需要去绑定store里面的数据，则需要通过dispatch一个action，然后action再去提交mutation修改store里面的值
记住Vue是单项数据流，而v-model只是一种语法糖，使用了双向数据绑定v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，v-model 只是语法糖而已：↓
v-model缺点
v-model 应用到组件上，会有一些体验不好的场景。因为它默认会把 value 作为组件的属性，把 input作为给组件绑定事件时的事件名。
有时间我们不想用 value 当做默认的属性名，也不想把 input 当做事件名。能不能自定义呢？在 Vue 2.2 及以上版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event

 1   <div id="app">
 2             <div>{
   {
   msg}}</div