命令式编程

假如我们要实现一个计数器，我们用原生的js写法可能是这样的：

   <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <h2 id="count"></h2>
        <button onclick="increase()" id="increase">+</button>
        <button onclick="decrease()" id="decrease">-</button>
        <script>
          const increaseElement = document.getElementById('increase')
          const decreaseElement = document.getElementById('decrease')

          let count = 0
          document.getElementById('count').innerHTML = count
          increaseElement.addEventListener('click', function () {
            count++
            document.getElementById('count').innerHTML = count
          })
          decreaseElement.addEventListener('click', function () {
            count--
            document.getElementById('count').innerHTML = count
          })
        </script>
      </body>
    </html>

首先找到+，-这两个按钮以及计数器的数字，然后定义这两个按钮的方法，最后实现这两个按钮的逻辑，最后改变计数器的数字。这样下来有一个很明显的缺点是什么：我们需要一步一步告诉程序我们应该干什么。这就是传统的命令式编程。

声明式编程

我们使用Vue来写上面这个案例：

   <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <script src="https://unpkg.com/vue@next"></script>
        <div id="app"></div>
        <script>
          Vue.createApp({
            template: `
              <div >
                <h2>{{count}}</h2>
                <button @click="increase">+</button>
                <button @click="decrease">-</button>
              </div>
              `,
            data: function () {
              return {
                count: 0,
              }
            },
            methods: {
              increase() {
                this.count++
              },
              decrease() {
                this.count--
              },
            },
          }).mount('#app')
        </script>
      </body>
    </html>

在Vue中，我们只需要将数据跟方法声明好，其余的操作比如绑定元素等操作不需要我们手动编写，Vue帮助我们完成。这就叫声明式编程。Vue是典型的声明式编程，对比命令式编程开发效率会提高很多，让我们可以更多专注于核心业务代码的编写。

MVVM

MVVM是Model—View-ViewModel的简称，是目前非常流行的架构模式。
通常情况下，我们把Vue看成一个MVVM框架。虽然官方有说明Vue没有完全遵循MVVM模型，但是整体是受到了MVVM的启发的。所以Vue依然可以说是一个MVVM框架。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

命令式-声明式-MVVM模型

命令式编程

声明式编程

MVVM