关于MVVM？我的理解。以及Vue的option(选项)

2020-8-14 07:21:24
早安喵咪~

首先在这里补充一下MVVM

关于MVVM

Vue是MVVM架构框架！

Vue在我实际体验后给我的感觉是，它在写html时 偏向于 View。写Js时则 偏向于 Model.而框架本身内部实现了数据和页面的双向绑定，也是MVVM的核心 ViewModel.(如有不对请纠正我！感谢)
由于只是刚开始体验Vue，我只是用 偏向于 这种形容词来解释它（也许以后会有写在html上的其他功能反而是model或者viewmodel呢？)

那什么是MVVM？

MVVM是一种架构模式。即 Model - ViewModel - View架构。
其中，Model为后台的各种数据模型，View为前台显示的各种界面。而ViewModel则是负责 监听页面，提供与Model建立一种连接的方法，通过该方法来修改数据。同时，监听Model数据，如果数据被更改，则更新View部分。

此处我并没有深究，如果看过源码我或许能解释数据如何更新到页面。我理解可能由ViewModel负责渲染页面。也就是说，后台操作数据后，ViewModel监听到改变，将数据用某种方式告知View，然后View自己重新渲染。
说到ViewModel(好麻烦，下面用vm代替)，我就要说一下另一种架构方式了。

MVC架构

MVC架构和MVVM很像。MVC全名 Model - Controler - View。
在MVC架构模式下，Model还是数据模型，View为用户可见的界面，而Controler是控制器。MVC和MVVM的区别就是 Controler 和 vm。
在MVC架构中，控制器起到的作用是 当用户在view层交互后，将操作告诉控制器，控制器负责    处理数据    将数据写入到数据库并确认改完后，然后将更改后的数据告知Model,你可以修改你的数据啦！，然后控制器又把数据返回给view，View重新渲染页面中的数据。
注意到了吗？

vm 能实现传话筒的功能，而c则实现处理器的功能。

MVC架构中，Model与View没有直接联系。所有前后台数据都要交由Controler处理并告知两方结果。而MVVM架构则是VM搭建桥梁，数据、功能都由Model处理(或者说由Model提供的方法处理)，而Model只需要将数据修改，vm就会监听到改变并告知view新的数据（老传话筒了）。

好啦，解释清楚他们的区别。我们来接着说mvvm.
vm中的核心功能：双向绑定。
vm实现这一核心功能的逻辑为：

1. 监听Dom改变。提供链接，告知model甚至直接修改Model (Dom Listener)
2. model处理数据
3. 监听到模型数据变化，数据劫持（这是我根据理解抄来的，我也不好形容这个数据劫持2333） Data Binding

咳咳。总之，Model改变后如何被数据劫持并渲染到View我真的看不懂。大多数帖子都是抄的一个文章，原作者是谁我也不知道，而那个文章只是通过一种方法实现了数据绑定。我不知道Vue是否用同样的方法实现。希望以后有空看看Vue源码，回来再更新这部分数据绑定。

我反正觉得未经允许照搬文章是不好的，所以我不贴代码了。地址也免了。网上搜搜都能找到实现双向绑定的方法。

2020-8-14 08:46:08
查各种文档理解VM有些花时间…我原本以为vm只是传递两方所做的操作并更新数据。只是Dom Listener就已经颠覆认知了2333.结果数据绑定还看不懂。难过。

接着做今天的笔记。

关于Vue的option

什么是选项？
昨天在js中，我曾经写过

el:"#app",
data{},
methods{}

这些 el 、data、methods都是选项。而Vue还有很多选项，后面会慢慢接触。没必要一次列一堆在这，我也不会用。
el其实也可以这样写:

el: document.queryselector()

哦对了，不要忘了这是vue实例的选项哦。
vue实例？？
就是这个啦

const app = new vue();//app就是实例对象！

顺带一提。学过后端语言的朋友肯定对方法这个词不陌生。可在前端有人喊方法、有人也喊函数。
笼统来说，在面向对象编程中，对象内的函数称为方法。而在js中，如果一个函数不属于某个特定对象，那么叫函数。（当然不用这么可以划分。爱咋叫咋叫啦。）

2020-8-14 09:01:27
又墨迹了一会儿…饿了，吃个早饭先。（PS:每回吃完饭都要歇个一小时起步的我是屑。但是…你屑我也屑，爽啦.jpg）