【Vue全家桶】声明式编程、MVVM

文章目录

• 【Vue全家桶】声明式编程、MVVM
• 写在前面
• 一、声明式编程与命令式编程
• • 1.1 原生方法实现
  • 1.2 Vue实现
  • 1.3 声明式和命令式编程
• 二、MVVM、MVC的区别
• • 2.1 MVC
  • 2.2 MVVM

写在前面

这里是前端程序员小张🫡

创作不易，希望各位大佬支持一下🌟

一、声明式编程与命令式编程

1.1 原生方法实现

计数器原生实现：

// 1.获取对应的dom
const counterEl = document.querySelector(".counter")
const addBtn = document.querySelector(".add")
const subBtn = document.querySelector(".sub")// 2.定义变量记录数据
let counter = 0
counterEl.textContent = counter// 3.监听按钮的点击
addBtn.onclick = function () {counter++counterEl.textContent = counter
}subBtn.onclick = function () {counter--counterEl.textContent = counter
}

1.2 Vue实现

Vue实现：

当前数字：{{counter}}
+1-1

const app = Vue.createApp({data: function () {return {counter: 0}},methods: {add: function () {this.counter++},sub: function () {this.counter--}}
}).mount("#app")

1.3 声明式和命令式编程

• 原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
  • 命令式编程和声明式编程；
  • 命令式编程关注的是 “how to do”自己完成整个how的过程；
  • 声明式编程关注的是 “what to do”，由框架完成 “how”的过程；
• 在原生的实现过程中，我们是如何操作的呢？
  • 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
  • 这样的编写代码的过程，我们称之为命令式编程；
  • 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；
• 在Vue的实现过程中，我们是如何操作的呢？
  • 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
  • 这样的编写代码的过程，我们称之为是声明式编程；
  • 目前Vue、React、Angular、小程序的编程模式，我们称之为声明式编程；

二、MVVM、MVC的区别

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。

2.1 MVC

• MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。
• 其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。
• 并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。
• Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新

2.2 MVVM

MVVM 分为 Model、View、ViewModel：

• Model代表数据模型，数据和业务逻辑都在Model层中定义；
• View代表UI视图，负责数据的展示；
• ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了 Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。