vue运用与实践

一、VUE介绍

学习前还是抛出俺们老三样：

什么VUE？
为什么要学习VUE？
MVVM和MVC有什么区别？

1.1、什么是VUE

VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写 VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定

1.2、为什么要学习VUE

要清楚我们现在为什么要去学习VUE，我们就要先理解一下编程行业的发展

00版本：html+js+css
这些程序员每一个div，每一句js，甚至每一个颜色码，都是手写出来的。就像是一台纯手工打造的法拉利，工程师们对这台车的细节都无比熟悉，甚至这台车里面哪片钢板上有一个小划痕他们都知道。（当然，纯手工打造也有连质检都过不了的，不是每个纯手工打造都叫法拉利，也就是说不是手写的代码就牛逼）

01版本:EasyUI+JQuery
纯手工打造费时费力，一些工程师们看到了商机，他们不做车了，他们转行去做了总成件供应商。这些供应商们把一些零件封装成了总成件，然后提供给汽车制造商，并且承诺总成件的质量比你原来自己做的质量好的多。换我，我也得用总成件啊是不是···

02版本：node.js + vue（React，Angular）+ElementUI（iview，antDesign）
node.js 横空出世，将前端平台化。以前的车（前端代码）只能在路上运行（浏览器），现在在你的实验室里车也能跑起来了（服务端）。（至于能不能用node.js去开发后端，我还没有试过，我就先不瞎XX了。）发展到这个阶段，开发模式就相当于由原来的作坊式生产变成了企业流水线。node.js的npm就是你的采购部门，npm ：你就说你要install啥。vue就是流水线,并且是双向绑定流水线。那ElementUI就是你的总成件仓库。工人要做的，就是把总成件放在车上。这对企业来说，生产力提高这么多，工具还全都是免费的，那收益不得蹭蹭上，于是大家都乐开了花

==所以：懒惰是第一生产力，一切框架的诞生都是因为懒~ ==

---

双向绑定原理

**v2基于Object.definePropety()方法。**利用object.definePropert()方法将它们转为getter/setter,并且设置了通知机制,每当修改变量时,就会触发通知机制,通知监视器watcher告知虚拟dom树,只要找到受影响的元素,就会自动更新受影响的元素。
**v3使用es6的代理器proxy()方法。**优势:①可以劫持整个对象,并返回一个新对象②defineProperty是循环遍历对象属性的方式来进行监听，自然会比proxy对整个对象进行监听的方式要耗性能③defineProperty不能监听数组下标改变值的变化，proxy可以且不需要对数组的方法进行重载④defineProperty 是对属性劫持，proxy 是对代理对象⑤defineProperty无法监听对象删除和修改属性，proxy可以。

---

MVVM和MVC有什么区别？

MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。
vue框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象 M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。 V（View）：视图层。就是展现出来的用户界面。 VM（ViewModel）：视图模型层。连接view和model的桥梁。因为，Model层中的数据往往是不能直接跟View中的控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

vue-router路由模式及其原理

①hash模式:在url中”#”以及后面的字符称为hash,是客户端的一种状态,因此向服务端发出请求时,hash部分不会被发送。通过a标签的href属性或者js对location.hash进行赋值,改变hash值,使用haschange事件来监听hash值变化,从而对页面进行跳转。
②history模式:通过h5提供的pushState和repalceState两个api来操作url的变化,使用popState事件来监听url的变化,从而实现页面跳转,前端的 URL 必须和实际向后端发起请求的 URL 一致
③abstract模式
原理:
①vue-router组件监控地址栏中的相对路径。
②一旦相对路径发生变化,vue-router立刻自动获得相对路径,跟路由字典中的每个路由对象比较。
③vue-router找到路由字典中匹配的路由对象,就会用路由对象中记录的页面组件对象(component)替换唯一index.html中的位置

---

vue组件通信

①父—>子:子组件通过props属性,绑定父组件数据,实现通信
②子—>父:将父组件的事件在子组件间中通过$emit触发
③兄弟间:新建一个vue实力作为中央事件，来实现监听/触发事件
④爷—>孙:父组件上绑定需要传的值然后在孙组件上v-bind绑定一个$attrs，孙组件直接用props接收
⑤孙—>爷:父组件上绑定自定义事件然后在孙组件上v-on绑定一个$listeners,孙组件用$emit出发爷组件自定义事件

---

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储(store)管理所有组件共享数据,并且当数据状态发生改变采用一种同步机制更新数据。
5种。State:定义数据结构,设置默认的初始状态。Getter:可以对state进行计算操作,是store的计算属性。Mutation:定义更改store中状态的方法。Action:提交的是mutation中的方法,Module:将store对象分割成模块,方便管理
使用:①脚手架下载安装vuex—>npm i vuex -S②在main.js 引入vuex模块并且配置③在组件中使用 应用场景:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

---

vue生命周期

vue实例对象从创建阶段——挂载阶段——更新阶段——销毁阶段等一系列过程,称之为生命周期
beforeCreate阶段:vue实例的挂载元素el和数据对象data都为undefined,还未初始化 created阶段:vue实例的数据对象有了,el还没有,此时已经可以发送ajax请求了,但是还未创建虚拟DOM树,不能执行DOM操作。
beforemount阶段:vue实例的$el和data都初始化了,但还是挂载之前未虚拟的DOM节点,data尚未替换
mounted阶段:vue实例挂载完成,data成功渲染。此时既可以发ajax请求,又可以执行DOM操作。
beforeUpdate阶段:data更新之前调用
updated阶段:data更新之后调用
beforDestroy阶段:数据销毁之前调用
destroyed阶段:数据销毁之后调用