现在世面上好用的前端框架琳琅满目,其核心内容基本都是:原型链、作用域链、异步非阻塞、闭包 等(个人感觉)
现在的框架结构感觉都在使用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是单向绑定,其实两个框架,没有太大的区别,底层实现原理应该也是很类似的,只是穿的马甲不一样罢了。