Vue.js
目前三个常用框架Vue.js、React、Angular.js
1.Vue.js是目前最火的一个框架(使用最多),React是最流行的一个框架(React除了开发网页,也可以开发手机app)
2.Vue.js是一套构建用户界面的框架,不仅易于上手,还便于跟第三方库整合
框架和库的区别
- 框架:提高开发效率。是一套完整的解决方案;对项目的入侵性很大,项目如果需要更换框架,则需要重构整个项目
- 库(组件):提供一个小功能,对项目的入侵性很小,如果某个库无法完成某些需求,可以容易的更换其他库来实现这些需求。
MVC和MVVM
- MVC是后端的分层开发概念
即Model、View、Controller即模型、视图、控制器。
- View:它是提供给用户的操作界面,是程序的外壳;
- Model:是程序需要操作的数据和信息;
- Controller:接收View层传递过来的指令,选取Model层对应的数据,进行相应操作。
MVC有如下两种模式,不管哪种模式,MVC的通信都是单向的,由图也可以看出,View层会从Model层拿数据,因此MVC中的View层和Model层还是存在耦合的。
2 . MVVM是前段开发的分层思想,主要把每个页面分成M、V、VM
- M:是每个页面中单独的数据
- V:就是每个页面中的HTML结构
- VM:是个调度者,分割了M和V,每当V层想要获取保存数据的时候,都要由VM做中间的处理
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 当导入包之后,在浏览器的内存中,就多了个Vue的构造函数 -->
</head>
<body>
<div id="app"> <!--vue实例所控制的元素区域,就是MVVM中的V -->
<p>
{{ msg }}
</p>
</div>
<script> // 创建VUE实例,
var vm = new Vue({ // 注意:此处new出来的vm对象就是MVVM中的vm调度者
el: '#app', //vue控制此处指定的元素的所有内容
data: { // data属性中存放的是el中要用到的数据,相当于MVVM中的M
msg: 'chengjiawei' // 通过vue提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素
}
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
MVVM的原理:Vue框架是如何实现MVVM设计模式的
(1)new Vue()加载data对象
a.new Vue()将data对象打散为单个变量!
b.将当个变量隐姓埋名,且半隐藏。
c.再为每个隐藏的变量请保镖,保镖冒名顶替原变量名
1).Data中每个属性都有一对get/set方法
2)今后只要想修改data中的变量都会自动触发set()
3)在每个属性的set方法中,都自动植入一个notify()函数调用,只要试图修改data中的属性值时,都会自动调用set(),只要自动调用set()势必会自动notify()发出通知
(2).加载 虚拟DOM树:
a.通过el属性值的选择器找到要监控区域的父元素
b.创建虚拟dom树
c.扫描这个要监控的区域:
1)只要发现标有绑定语法{{变量}}的元素,立刻加入虚拟DOM树中保存。
2) 每发现一个@事件名=“函数名”的元素,就自动变为:on事件名=“new Vue().函数名”
3)加载methods对象:methods对象中的所有方法,都会被打散,直接隶属于new Vue()和data中被打散的属性平级
所以,在methods中的方法中,像操作data中的属性,都可以写为“this.属性名”即可
4)当触发事件时,自动调用new Vue()中的methods中指定的函数,执行其中this.属性名的修改。修改会自动触发属性的set()方法,自动触发set()内部的notify函数:
a.遍历虚拟DOM树,只找出受影响的个别元素
b.利用虚拟DOM树提前封装好的DOM操作,只修改页面中受影响的个别元素--效率高
总结:MVVM的原理/Vue的绑定原理
访问器属性+观察者模式+虚拟DOM树
什么是虚拟DOM树:
什么是虚拟DOM树: 仅保存可能发生变化的页面元素的极简化版DOM树。
优点:
1). 小,遍历极快!
2). 只更新受影响的元素效率高!
3). 已经封装了增删改查的DOM操作,所以无需重复编码,就可自动更新页面内容。
MVVM中的数据可以实现双向绑定,即View层数据变化则ViewModel中的数据也随之变化,反之ViewModel中的数据变化,则View层数据也随之变化
下面总结MVC和MVVM关系