v-model实现双向数据绑定的原理

晨曦
1,582 阅读2分钟

【前言】v-model实现的双向数据绑定可以说是整个vue.js最具特色的技术，基于MVVM的设计模式，实现了模型与视图之间的双向数据绑定，用数据去驱动视图的改变。

什么是MVVM设计模式

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式，ViewModel能够观察到数据的变化，并对视图对应的内容进行更新，能够监听到视图的变化，并能够通知数据发生变化。而vue框架基于MVVM的设计模式它的核心就是实现了DOM的监听与数据的双向绑定。

  • View是视图层，也就是用户界面。前端主要由HTML和CSS来构成，为了更方便地展现ViewModel或者Model层的数据。
  • Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
  • ViewModel由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者从后端获取得到Model数据进行转换出来，做二次封装，以生成符合View层使用预期的视图数据模型。视图状态和行为都封装在ViewModel里。这样的封装使得ViewModel可以完整地去描述View层。

image.png

什么是双向数据绑定

双向数据绑定通俗的理解就是改变数据的时候视图也会同步发生改变，实现了视图和数据之间的同步改变，在vue中使用指令v-model来实现数据的双向绑定，主要使用场景是对form实现双向数据绑定，就是将vue实例中的data数据渲染到页面显示。

<template>
  <div>
    <form>
      <input type="text" v-model="msg"/>
    </form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '我是input输入框'
    }
  }
}
</script>

借用vue的调试工具，可以清楚的看到当input输入框中的值发生改变时，data中定义的变量也随之发生改变，这一过程叫做数据的双向绑定。

6400d852-c391-4699-8591-c2da3e7123b5.gif

双向数据绑定的原理

以上实现数据的双向绑定是借用vue框架提供的指令v-model实现，那么v-model的底层实现原理究竟是什么呢？相信这篇文章会给你带来不一样的收获。

  • v-model实际上可以理解为一个语法糖，而他的底层实现原理就包括input的value属性和input事件。
<input v-modle="msg" /> 
// 等同于 
<input :value="msg" @input="msg = $event.target.value"/>

  • input属性绑定data中声明的----msg变量，本质上就是将值传给input；

  • input事件，该事件在input的值msg改变时触发，事件触发时给msg重新赋值，所赋的值是$event.target.value，也就是当前触发input事件对象的dom的value值，也就是该input的值。

input标签实现的双向数据绑定看似只有一个v-model指令，实际上它的实现是input标签动态绑定一个value属性和一个input事件。

avatar
文章
阅读
粉丝