vue数据双向绑定

现在世面上好用的前端框架琳琅满目，其核心内容基本都是：原型链、作用域链、异步非阻塞、闭包 等（个人感觉）

现在的框架结构感觉都在使用mvvm模式，而mvvm又相当于是mvc的增强版，所以想理解mvvm，还是需要理解mvc

之前浏览过一个帖子，感觉mvvm图解不错：

阮大高玩（大神级别高端玩家）的帖子介绍mvc：http://www.ruanyifeng.com/blog/2007/11/mvc.html

 

前面啰嗦结束（其实感觉前面的才是最主要的），下面讲一下vue双向数据绑定的实现，

实现双向数据绑定，必须得两个组件之间体现。

主旨思想：父组件数据传子组件：使用属性；子组件数据传父组件：调用父组件给的方法

直接上代码：

这是父组件的配置：里面是两个input组件，第二个input是在解释第一个input的v-model属性的含义。

<template><!-- template模板 -->
  <div id="app">
      <!-- v-model === :value + @input -->
      <el-input v-model="inputval" ></el-input>
      
      <el-input :value="inputval" @input.native="inputEve" ></el-input>
      <!-- 父传子：使用属性，子组件watch监听属性变化，子传父：使用方法 -->
      <!-- 数据双向绑定好像都是这么做 -->
      <Child v-bind:inputval = "inputval" :syncParentData="syncCurData"/>
  </div>
</template>
<script>
    import Child from './test/Child.vue'
    export default {
        components:{
            Child
        },
        data:()=>{
            return {
                inputval:'',
            }
        },
        methods:{
            inputEve:function(v){
                // @input  触发之后并没有合并新输入的值，新输入的值在v.data中放着，需要追加到原值后面
                this.inputval = v.target.value+v.data;        
            },
            syncCurData:function(data){
                this.inputval = data;
            }
        }
    }
</script>
<style>
    #app{
        margin:0;
        padding:0;
    }
</style>

这个是子组件，子组件接收到父组件传来的 inputval属性和syncParentData方法（都在props里），watch(相当于react中的componentWillReceiveProps方法)监听inputval的变化，同步到当前组件，

同时在当前组件编辑改变时触发同步父组件数据方法syncParentData

<template>
  <div class="child">
    <!--  -->
      <el-input 
        v-if="curVal"
        v-model="curVal" 
        @input.native="syncCurVal"
    ></el-input>

    <el-button v-if="curVal">{{curVal}}</el-button>
  </div>
</template>

<script>
    export default {
        props:['inputval','syncParentData'],
        data:()=>{
            return {
                curVal:'',
            }
        },
        methods:{
            //子传父方法
            syncCurVal:function(v){
                //v-model属性绑定后,input改变事件拿到的值就是改变后的
                this.syncParentData(v.target.value);
            }
        },
        watch:{
            // 子组件监听父组件属性变化，同步到子组件（相当于React的componentWillReciveProps里做的事情）
            inputval:{
                handler:function(newVal){
                    this.curVal = newVal;
                },
                deep:true,
                immediate:false
            }
        }
    }
</script>

<style>
    
</style>

这也解释了上面图中的data binding 和 DOM listeners。

 

finally : vue和react各有优势吧，都说react是单向数据绑定，但是实现react数据双向绑定，也是这个思路，没有什么区别，不知为什么网上总说vue是双向绑定，react是单向绑定，其实两个框架，没有太大的区别，底层实现原理应该也是很类似的，只是穿的马甲不一样罢了。