Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

一、数据双向绑定

我们来看一个例子~(连接地址:https://cn.vuejs.org/v2/guide/index.html

Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

我们可以通过改变输入框中的值去改变 p 标签中的值,这个就是数据的双向绑定。

只要是绑定了 message 的值,都会随着数据变化而去改变。

二、数据监听

其实上面的例子中就用到了数据监听。

我们在绑定好数据之后,在 input 框中修改之后,message 值只要被改变,就会通知其他绑定了 message 的地方同时去改变。

当然哈,具体是怎么实现数据监听的,大家可以自行去研究。(这里给一个提示:Object.defineProperties([Object] obj, [Object] props);)

三、MVVM 设计思想

Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

这个 MVVM 是 Model-View-ViewModel 的简写。它的本质其实是对 MVC 模式的一种改进。

第一个字母 M 代表 Model,也就是数据。

第二个字母 V 代表 View,也就是视图。

第三第四个字母需要合起来看,VM 代表 ViewModel,它是

更核心一点的我们可以看下面的

Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

然后我们通过一个图来具体的说明一下这个 MVVM 设计思想

Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

首先是 html 页面,这个 html 页面只管显示,数据是我们从后端进行获取,最后通过桥梁(Vue、React 等),渲染到页面。

四、MVVM 优点

Vue3 _ 2. Vue 核心原理 & MVVM 设计思想

 

可以说这个 MVVM 是一个前端的设计思想,而且可以将数据与页面都独立出来,希望大家可以好好理解

 

这一篇东西不多,自己练习一下

有问题可以联系我:QQ 2100363119,欢迎大家访问我的个人网站:https://www.lemon1234.com

最近网站在改造中,欢迎各位提出意见。

上一篇:MVC,MVP 和 MVVM


下一篇:什么是Vue?Vue的工作原理是什么?