vue中数据双向绑定v-model的原理

数据双向绑定是两个指令的结合：v-bind、v-on；

实现原理：

<template>
  <div class="VModel">
    <!--    当输入框的内容发送改变，就会触发事件-->
    <input type="text" v-bind:value="message" v-on:input="valueChange">
    <p>{
    
    {
    
     message }}</p>
  </div>
</template>

<script>
export default {
    
    
  name: "VModel",
  data() {
    
    
    return {
    
    
      message: "你好啊"
    }
  },
  methods: {
    
    
    valueChange(e) {
    
    
      console.log(e);
      this.message = e.target.value
    }
  }
}
</script>

核心方法：Object.defineProperty来实现对属性的劫持，达到监听数据的目的。把 data 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新