Vue
Vue是一个前端js框架,由尤雨溪开发,是个人项目 目前由饿了么ude团队进行维护
Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular开发团队也开发了angular2.0版本,并且更名为angular,吸收了react、vue的优点,加上angular本身的特点,也吸引到很多用户。
学习vue是现在前端开发者必须的一个技能。
前端js框架作用,为什么要用
js框架帮助开发者写js逻辑代码,在开发应用的时候js的功能划分为如下几点:
-
渲染数据
-
操作dom(写一些效果)
-
操作cookie等存储机制api
在前端开发中,如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题,而且当数据量大,流向较乱的时候,如何正确使用数据,操作数据也是一个问题。
而js框架对上述的几个问题都有自己趋于完美的解决方案,开发成本降低、高性能高效率。唯一的缺点就是需要使用一定的成本来学习。
Vue官网介绍
vue是渐进式JavaScript框架 用到什么功能,只需要引入什么功能模块
vue的主张较弱
Vue可以在任意其他类型的项目中使用,使用成本较低,更灵活,主张较弱,在Vue的项目中也可以轻松融汇其他的技术来开发,并且因为Vue的生态系统特别庞大,可以找到基本所有类型的工具在vue项目中使用
特点:易用(使用成本低),灵活(生态系统完善,适用于任何规模的项目),高效(体积小,优化好,性能好)
Vue是一个MVVM的js框架,但是,Vue 的核心库只关注视图层,开发者关注的只是m-v的映射关系
vue框架的引入与简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
<!-- 声明一条数据,然后用特殊的模板语法将其渲染到界面中 ===> 声明式渲染 -->
{{msg}}
</div>
<!-- 引入vue框架 新手建议引入开发版的vue,有错误代码提示 -->
<script src="./base/vue.js"></script>
<script>
// 创建vue实例
new Vue ({
el:"#test", //el ==> 挂载点
data:{ //data ==> 数据
msg:"hello world"
}
})
</script>
</body>
</html>
MV*模式(MVC/MVP/MVVM)
MVC
Model View Controller
用户对View操作以后,View捕获到这个操作,会把处理的权利交移给 Controller;Controller会对来自View数据进行预处理、决定调用哪个Model的接口;然后由Model执行相关的业务逻辑(数据请求); 当Model变更了以后,会通过观察者模式(Observer Pattern)通知View; View通过观察者模式收到Model变更的消息以后,会向Model请求最新的数据,然后重新更新界面。
把业务逻辑和展示逻辑分离,模块化程度高。但由于View是强依赖特定的 Model的,所以View无法组件化,无法复用
MVP
Model View Presenter
和MVC模式一样,用户对View的操作都会从View交移给Presenter。 Presenter会执行相应的应用程序逻辑,并且对Model进行相应的操作;而这时候Model执行完业务逻辑以后,也是通过观察者模式把自己变更的消息传 递出去,但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后,通过View提供的接口更新界面。
View不依赖Model,View可以进行组件化。但Model->View的手动同步逻辑麻烦,维护困难
例子
比如点击toggle按钮时要使得红色盒子显示隐藏,使用原生js实现的话如下。
<body>
<div id="box">
<button class="btn">toggle</button>
<button class="btn2">big</button>
<div class="box">
</div>
</div>
<script>
//面向过程的代码
let btnDom = document.querySelector(".btn")
let boxDom = document.querySelector(".box")
let flag = true
btnDom.onclick = function(){
if(flag){
boxDom.style.display = "none"
flag = false
}else{
boxDom.style.display = "block"
flag = true
}
}
</script>
</body>
如果说仅仅实现一个功能,使用原生js还是比较容易的,但是如果需要添加多个功能的话,那这种方法无疑是最吃力的。如果换成vue框架来实现,就会轻松很多了,下面我们看看使用vue框架是如何实现的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<button class="btn">toggle</button>
<button class="btn2">big</button>
<div class="box">
</div>
</div>
<!-- 引入vue框架 新手建议引入开发版的vue,有错误代码提示 -->
<script src="./base/vue.js"></script>
<script>
/*
mvc:
m:model 数据模型层 dao层
v:view 视图层
c:controller 控制器 service
controller的作用:就是将m层的数据在view层进行显示
*/
// m层
let model = {
isShow: true,
isBig: true
}
// v 层
let boxDom = document.querySelector(".box")
//c层
function controller() {
this.init()
}
controller.prototype = {
init() {
this.addEvent()
},
addEvent() {
let btnDom = document.querySelector(".btn")
let btn2Dom = document.querySelector(".btn2")
// 实现显示隐藏功能
btnDom.onclick = () => {
// 更改数据
model.isShow = !model.isShow
// 渲染视图
this.render()
}
// 添加放大 还原功能
btn2Dom.onclick = () => {
// 更改数据
model.isBig = !model.isBig
// 渲染视图
this.render()
}
},
// 要实现的效果
render() {
boxDom.style.display = model.isShow ? "block" : "none"
boxDom.style.width = model.isBig ? "300px" : "100px"
}
}
new controller()
</script>
</body>
</html>
如此一来就轻松多了。
MVVM
Model View ViewModel
MVVM的调用关系和MVP一样。但是,在ViewModel当中会有一个叫 Binder,或者是Data-binding engine的东西。你只需要在View的模版语法中,指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。 当ViewModel对Model进行更新的时候,Binder会自动把数据更新到View上 去;当用户对View进行操作(例如表单输入),Binder也会自动的把数据更新到Model上去。这种方式称为:Two-way data-binding,双向数据绑定。
它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然
Vue的使用
Vue不支持IE8,因为使用了ES5的很多特性
Object.defineProperty(_data,“msg”,{get(),set()}) _data.msg
- 可以直接通过script标签来引入vue.js,有开发版本和生产版本,开发版本一般我们在开发项目的时候引入,当最后开发完成上线的时候引入生产版本,开发版本没有压缩的,并且有很多提示,而生产版本全部删掉了
直接下载并用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 在Vue中提供了一个脚手架(命令行工具)可以帮我们快速的搭建基于webpack的开发环境…
npm install ‐g @vue/cli
Vue的实例
每一个应用都有一个根实例,在根实例里我们通过组件嵌套来实现大型的应用
也就是说组件不一定是必须的,但是实例是必须要有的
在实例化实例的时候我们可以传入一个;配置项,在配置项中设置很多属性方法可以实现复杂的功能
在配置中可以设置el的属性,el属性代表的是此实例的作用范围
在配置中同过设置data属性来为实例绑定数据
vue的双向数据绑定原理原理
-
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty
是 ES5 中一个无法模拟的特性, 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知watcher,从而使它关联的组件重新渲染。 -
vue在创建vm的时候,会将数据配置到实例中,然后通过Object.defineProperty方法,为数据动态的添加getter与setter方法。 当获取数据的时候,会触发对应的getter方法,当设置数据的时候,触发对应的setter方法。然后当setter方法触发完成的时候,内部会进一步触发watcher,当数据改变了,视图则更新操作完毕。
vue内部通过数据劫持&发布订阅模式实现数据的双向绑定
- 通过Object.defineProperty方法对所有的数据进行数据劫持,就是给这些数据动态的添加了getter与setter方法。在数据变化的时候发布消息给订阅者(Watcher),触发响应的监听回调。
<body>
<div id="app">
</div>
<script src="./base/vue.min.js"></script>
<script>
var obj = {}
let middel = 100
Object.defineProperty(obj,"msg",{
get(){
return middel
},
set(val){
middel = val
}
})
console.log(obj.msg) //获取对象的属性的时候,会调用自身的get方法
obj.msg = 1111 //设置对象的属性的时候,会调用自身的set方法
console.log(obj.msg)
</script>
</body>
扩展:
注意:vue3 的 变化 Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化;
2、无法监听Class类型的数据;
3、属性的新加或者删除也无法监听;
4、数组元素的增加和删除也无法监听。
针对Object.defineProperty的缺点,ES6 Proxy都能够完美得解决,它唯一的缺 点就是,对IE不友好,所以vue3在检测到如果是使用IE的情况下(没错,IE11都不支持Proxy),会自动降级为Object.defineProperty的数据监听系统。