MVVM是什么?对比MVC优势?
MVVM即model、view、viewmodel缩写,model和view分别代表的是数据和业务逻辑层、视图层,viewmodel是桥梁,连接view和model,包括dom-listener和data-binding,实现双向数据绑定。
特点:
- MVC是数据单向绑定。
- MVVM低耦合,实现页面逻辑和渲染的解耦,视图和数据的解耦,实现组件化开发。
双向数据绑定的原理
- 数据劫持(Object.defineProperty)和发布订阅者模式
v-model
语法糖,通过v-bind绑定数据和v-on触发oninput事件实现v-model
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
<!--
自html5开始,input每次输入都会触发oninput事件,
所以输入时input的内容会绑定到searchText中,于是searchText的值就被改变;
$event 指代当前触发的事件对象;
$event.target 指代当前触发的事件对象的dom;
$event.target.value 就是当前dom的value值;
在@input方法中,value => searchText;
在:value中,searchText => value;
-->