（03）Vue 初识——③ MVVM 模式 | Vue 基础理论实操

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。

---

涉及面试题：
1. 什么是 MVVM？比之 MVC 有什么区别？
2. Vue 的优点？
3. 渐进式框架的理解？
4. 三大框架的对比？

[编号：vue_03]

🔗本阶段对应的“官方文档”阅读“介绍”章节

MVVM 设计模式

Vue 是 MVVM 模式的框架。

当我们使用 MVVM 这种模式的框架进行编码的时候，我们不需要关注 VM 这一层到底是怎么实现的，它是 Vue 内置的。我们只需要关注“ M 层”和“ V 层”。

对 MVVM 这种模式进行编码的时候，编码的重点在于“视图层”和“模型层”。

• View：视图层，负责显示数据。 会监听数据、事件的触发（主要是 Vue 的指令）。

<div id="app">
  <input type="text" v-model="inputValue">
  <button v-on:click="handleBtnClick">添加</button>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>

• Model：数据层，负责存储数据。 在 Vue 中，我们主要在写数据。

     💡 【重点关注这一层】——面向数据开发。

<script>
  var app = new Vue({
    el: '#app',
    data: {
      list: [],
      inputValue: ''
    },
    methods: {
      handleBtnClick() {
        this.list.push(this.inputValue) // 1️⃣实现了当点击时，把获取到的输入内容这个数据放入列表中；
        this.inputValue = '' // 2️⃣通过改变 inputValue 数据，实现了清空输入框的功能。
      }
    }
  })
</script>

• ViewModel： 这是 Vue 自带的一层，不需要我们编写。它将 View 层和 Model 层连接起来，当视图层变化时，数据层也跟着变化，反之亦然。这其中 ViewModel 带动其视图和数据的变化。

🏆总结：

• Vue （即 ViewModel 层）会监听到你数据变了，它会帮你去改变视图层；
• Vue 也会监听到视图层有一些事件触发，然后帮助你通过 VM 这一层去调用你写的一些逻辑代码，通过这些代码，你又改变了 M 层的“数据”。当“数据”发生变化的时候，VM 层又会自动地把“数据”的变化映射到“视图层”上面来。

🏆这样的话有一个好处： 当我们使用 Vue 这种 MVVM 框架进行开发的时候，我们只需要去关注“ M 层”的开发就可以了！我们把“数据”做一个修改，页面会自动地跟着变。同时，页面上的变化，Vue 实例也能感知到，可以方便地帮我们去操作数据。

祝好，qdywxs ♥ you！