一文详解Vue的响应式原则与双向数据绑定

Object.defineProperty(obj, key, {
   enumerable: true,
   configurable: true,
   get: function getter () {
       return obj[key];
   },
   set: function setter (newVal) {
       ...
    }  
})

let nObj=new Proxy(obj,{
 get: function (target, propKey, receiver) {
   console.log(`getting ${propKey}!`);
   return Reflect.get(target, propKey, receiver);
 },
 set: function (target, propKey, value, receiver) {
   console.log(`setting ${propKey}!`);
   return Reflect.set(target, propKey, value, receiver);
 }
})

<template>
  <input v-model='localValue'/>
</template>

<template>
  <input @input='onInput' :value='localValue' />
  <span>{{localValue}}</span>
</template>
<script>
 export default{
   data(){
     return {
       localValue:'',
     }
   },
   methods:{
     onInput(v){
        this.localValue=v.target.value;
        console.log(this.localValue)
     }
   }
 }
</script>

<tempalte>
 <div class="count" @click="addCount">click me {{value}}</div>
</template>
<script>
export default{
     props:{
       value:{
         type:Number,
         default:0
       }
     },
     watch:{
       value(v){
         this.localvalue=v;
       }  
     },
     methods:{
       addCount(){
          this.localvalue++;
          this.$emit('input',this.localvalue);
       }
     },
     data(){
       return{
         localvalue:0
       }
     },
     created(){
       this.localvalue=this.value;
     }
   }
</script>

<template>
 <add-one v-model="count"></add-one>
 <span>The parent component{{count}}</span>
</tempalte>
<script>
export default{
 data() {
   return {
      count: 0,
   };
 },
 methods: {
 },
  created(){    
 }
}
</script>

export default{
 model:{
   value:'count',
   event:'change'
 },
 props:{
   count:{
     type:Number,
     default:0
   }
 },
 methods:{
   addCount(){
      this.localvalue++;
      this.$emit('change',this.localvalue);
   }
 },
}

<add-one v-model="count"></add-one>

<template>
  <add-one @change='onChange' :count='count'></add-one>
  <span>{{count}}</span>
</template>
<script>
 export default{
   data(){
     return {
       count:0,
     }
   },
   methods:{
     onChange(v){
        this.count=v;
        console.log(this.count)
     }
   }
 }
</script>