Vue2——v-model 双向绑定的原理

v-model 是 vue 中进行数据双向绑定的指令，v-model 本质就是 :value + input 方法的语法糖。可以通过 model 属性的 prop 和 event 属性来进行自定义。原生的 v-model ，会根据标签的不同生成不同的事件和属性。

例如：

• text 和 textarea 元素使用 value 属性和 input 事件
• checkbox 和 radio 使用 checked 属性和 change 事件
• select 字段将 value 作为 prop 并将 change 作为事件

以输入框为例，当用户在输入框输入内容时，会触发 input 事件，从而更新 value 。而 value 的改变同样会更新视图，这就是 vue 中的双向绑定。

请看以下代码示例：

<template>
  <div>
  	<!-- v-model实际是一个语法糖 -->
    <input type="text" v-model="username">
    <h2>{
   {
   username}}</h2>
    <!-- 其实就是value绑定变量username，并且input事件中，每次输入的值重新赋值给变量username -->
    <!-- $event 就是当前触发事件的对象 -->
    <input type="text" :value="username" @input="username=$event.target.value">
    <input type="text" :value="username" @input="handleInput">
  </div>
</template>

<script>
export default {
   
  data () {
   
    return {
   
      username:"jack"
    }
  },
  methods: {
   
    handleInput(e){
   
      console.log(e)
      this.username = e.target.value;
    }
  },
}
</script>

其实，vue 响应式，主要利用了 Object.defineProperty 方法的特性。
Object.defineProperty 语法：

Object.defineProperty(要定义的对象名,'要定义的属性',{
   定义的数据属性});

例如：

let obj = {
   
  username