Vue 3.0 和 Vue 2.0的对比以及Vue 2.0精讲以及Vue全家桶精讲

时间 2019-11-16

标签 vue 3.0 2.0 对比以及全家栏目应用数学繁體版

原文原文链接

前言javascript

最近在整理Vue的一些内容,包括Vue 3.0新特性,Vue 2.0的一些特性以及实现方法,还有Vue全家桶的内容,涉及到的内容较多因此找个机会发篇文章,把要点所有讲出来.综合整理下这样看着也舒服,好了废话很少说开始开始.php

正文html

1 Vue 3.0 和 Vue 2.0的对比

1.1 Vue 3.0的新特性以及原理

1.1.1 观察机制

简述：更完备、更精准、更高效，能够对响应式跟踪进行调试，新增了一个建立可观察对象（observable）的 API。前端

3.0 版本里将有一个基于 Proxy 的观察者，它会提供全语言覆盖的响应式跟踪。相比于 2.x 版本里基于 Object.defineProperty 的观察者，新的实现更增强大：vue

能够检测属性的新增和删除

能够检测数组索引的变化和 length 的变化

支持 Map、Set、WeakMap 和 WeakSet

上面正文中提到的Proxy算是此次Vue 3.0 最大的亮点,它不只取代了Vue 2.0 的 Object.defineProperty 方法而且组建生成增快 100%还有就是快一倍 / 减小通常的内存使用java

下面看一个最简单的Proxy实现方法:webpack

let obj = {
    	a : 1
}
let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
        return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})
    
console.log(proxyObj.a);        // 1
console.log(proxyObj.b);        // 0

proxyObj.a = 666;
console.log(proxyObj.a)         // 888
复制代码

上述例子中，咱们事先定义了一个对象 obj , 经过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为从新作了修改。ios

当咱们访问对象内本来存在的属性时，会返回原有属性内对应的值，若是试图访问一个不存在的属性时，会返回0 ，即咱们访问 proxyObj.a 时，本来对象中有 a 属性，所以会返回 1 ，当咱们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当咱们试图去设置新的属性值的时候，老是会返回 888 ，所以，即使咱们对 proxyObj.a 赋值为 666 ，可是并不会生效，依旧会返回 888!git

想要了解更多Proxy就去这里看看阮一峰大大的ECMAScript 6 入门: es6.ruanyifeng.com/#docs/proxyes6

新的观察者还有如下特色：

提供了一个建立可观察对象的 API。对于中小型应用来讲，这个 API 能提供一个轻量、简单的跨组件状态管理方案。

不可变的可观察对象（Immutable observable）。咱们能够给一个值建立多个不可变的版本，以防有人修改其属性，必需要在系统在内部临时将其解锁时才能修改其属性。这个机制可以用于冻结传给子组件的属性或者冻结 Vuex 状态树以外的状态变动。

更强大的 debug 能力。咱们使用新的 renderTracked 和 renderTriggered 钩子来精确地查明一个组件的 render 是在何时由谁触发的。

很容易知道为何一个组件会从新渲染

1.1.2 其余的运行时加强

简述：体积更小、速度更快，支持 tree-shaking，支持 fragment 和 portal，支持自定义 render。

体积更小。新的代码库在设计的时候就考虑了 tree-shaking。内置的组件（如）和内置的指令（v-model）是按需引入的，支持 tree-shaking。新的运行时最小体积将低于 10kb（gzip以后）。除此以外，因为不少特性是支持 tree-shaking 的，因此咱们能够提供更多的内置特性，若是你不想用这些特性，你的代码体积彻底不会增长。另外在这里说一嘴,Vue 2.0 体积是Vue 3.0 的一倍

速度更快，包括虚拟 DOM 的挂载和更新、组件实例的初始化和观察者的建立。3.0 版本将让你的应用启动时间减小一半。

支持 fragment 和 portal。虽然体积变小了，可是 3.0 版本仍是带来了新功能，那就是支持 Fragment（一个组件包含多个根节点）和 Portal（在 DOM 中渲染一个 subtree，而不须要在一个组件中）。

插槽机制加强。全部由编译产生的插槽如今都是函数，这些函数会在子组件的 render 调用时被调用。这样一来，插槽中的依赖会被认为是子组件的依赖而不是父组件的依赖。这意味着：一、当插槽内容变化时，只有子组件从新渲染；二、当父组件从新渲染时，若是插槽内容没有变化，子组件就不须要从新渲染。这个特性提供了更精确的组件树层面上的变动检测，因此会减小不少无用的渲染。

自定义 render。咱们会提供一个 API 用来建立自定义的 render，所以你不须要为了自定义一些功能而 fork Vue 的代码。这个特性给 Weex 和 NativeScript Vue 这样的项目提供了不少便利。

>1.1.3 编译器加强

简述：编译出的内容对 tree-shaking 友好，更多 AOT 优化，更好的错误提示，对 source map 的支持更好。

为了输出对 tree-shaking 友好的代码，模板中若是用到了一些可选特性，那么生成的代码中将使用 ES 模块语法来 import 这些特性。所以没有用到的可选特性就不会出如今最终代码中。

因为对虚拟 DOM 进行了优化，因此有了更高效的编译时优化，好比静态树提高、静态属性提高、为运行时添加编译提示信息以减小子节点正常化（children normalization），VNode 建立的快速路径等。

重写解析器（parser），以在模板编译错误提示中添加位置信息。这也会使得 Vue 支持模板的 source map。新的解析器能够提供给第三方工具使用，好比 eslint-plugin-vue 和 IDE。

1.2 Vue 3.0和Vue 2.0 的对比

1. 默认进行懒观察（lazy observation）。在 2.x 版本里，不过数据多大，都会在一开始就为其建立观察者。当数据很大时，这可能会在页面载入时形成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」建立观察者，并且 3.x 的观察者更高效。

2. 更精准的变动通知。比例来讲：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的全部 watcher 都会从新运行；3.x 版本中，只有依赖那个属性的 watcher 才会从新运行。

暂时来说,Vue 3.0 和 Vue 2.0 中间虽然api没有什么特别大的变化,可是相对于原理而言Vue 3.0 使用了TypeScript进行重构以后各方面的性能提高都有了一个重大突破(相对于2.0来讲),另外这个工做已近从2.6版本渐渐开始了,虽然提高效果不是很明显,可是我相信Vue3.0能给咱们带来更大的惊喜.

2 Vue 2.0精讲

2.1 MVVM框架和普通框架的区别以及Vue2.0实现的方式

2.1.1 MVVM框架

首先咱们先得了解什么事MVVM框架,它又和普通的框架有什么区别(Jquery):

mvvm 是 model + view + viewmodel 框架，经过 viewmodel 链接数据模型model 和 view

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时做用域某个HTML元素上的，这个HTML元素能够是body，也能够是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面全部View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

2.1.2 MVVM框架和普通框架的区别

区别：vue 是数据驱动，经过数据来显示视图层而不是节点操用

2.1.3 Vue2.0实现的方式以及双向绑定js实现例子

既然知道其中的区别就让咱们看看vue双向绑定的原理是什么,简单用一句话归纳就是:

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>
复制代码

2.2 Vue的生命周期以及适用场景

2.2.1 Vue的生命周期

既然讲了原理咱们就不得不谈谈Vue的特点生命周期:

首先总共分为8个阶段建立前/后，载入前/后，更新前/后，销毁前/后,下面就看看官方讲解:

建立前/后:

beforeCreate（建立前）在数据观测和初始化事件还未开始

created（建立后）完成数据观测，属性和方法的运算，初始化事件，$el属性尚未显示出来

载入前/后

beforeMount（载入前）在挂载开始以前被调用，相关的render函数首次被调用。实例已完成如下的配置：编译模板，把data里面的数据和模板生成html。注意此时尚未挂载html到页面上。。

mounted（载入后）在el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用。实例已完成如下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程当中进行ajax交互。

更新前/后

beforeUpdate（更新前）在数据更新以前调用，发生在虚拟DOM从新渲染和打补丁以前。能够在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）在因为数据更改致使的虚拟DOM从新渲染和打补丁以后调用。调用时，组件DOM已经更新，因此能够执行依赖于DOM的操做。然而在大多数状况下，应该避免在此期间更改状态，由于这可能会致使更新无限循环。该钩子在服务器端渲染期间不被调用。

销毁前/后

beforeDestroy（销毁前）在实例销毁以前调用。实例仍然彻底可用。

destroyed（销毁后）在实例销毁以后调用。调用后，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

总结来说什么事vue的生命周期:

Vue 实例从建立到销毁的过程，就是生命周期。从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。另外呢这里再跟你们唠唠生命周期在第一次页面加载的时候会触发 beforeCreate, created, beforeMount, mounted 这几个钩子,而且DOM 渲染在 mounted 中就已经完成了,这样你们是否是更好理解一些呢

2.2.1 Vue的生命周期适合那些场景

生命周期钩子的一些使用方法： beforecreate : 能够在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 若是对数据统一处理，在这里写上相应函数 beforeDestroy : 能够作一个确认中止事件的确认框 nextTick : 更新数据后当即操做domarguments是一个伪数组，没有遍历接口，不能遍历。

2.3 Vue指令

Vue分为内部指定指令和自定义指令.

2.3.1 Vue内部指令

简单来说vue内部指令有这些v-for 、 v-if 、v-bind、v-on、v-show、v-else不是很全面可是用的最多的就是这些了.

而后包括修饰符.prevent: 提交事件再也不重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素自己而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用这些也会在项目中常常用到.

另外呢v-on能够绑定多个事件还有就是v-show指令，v-if的区别在于:

条件渲染指令，与v-if不一样的是，不管v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

v-bind算是双向绑定时会用到,另外v-for在循环加载列表时会使用,另外多说一嘴v-for有一个key的值,它的做用以下:

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key的做用主要是为了高效的更新虚拟DOM。

修饰符就很少作解释,你们能够去看看官网的解释:

vue官网:

vue中文官网

cn.vuejs.org/v2/guide/in…

2.3.2 Vue自定义指令

        全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另一个是函数。组件内定义指令：directives
        钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
        钩子函数参数：el、binding

2.4 Vue计算属性以及watch监听

在模板中放入太多的逻辑会让模板太重且难以维护，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名便可；⑤经常使用的是getter方法，获取数据，也可使用set方法改变数据；⑥相较于methods，无论依赖的数据变不变，methods都会从新计算，可是依赖数据不变的时候computed从缓存中获取，不会从新计算。下面是计算属性基础的例子:

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ quanming }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吴'
        },
        computed: {
            quanming:{
                get:function(){
                    return this.lastName + this.firstName
                }
            }
        }
    });
</script>
复制代码

而vue中的watch是一个比较重要的概念，经过他咱们能够检测data的变化,下面是一个简单的例子:

<div id="app">
    <input v-model = "lastName" >
    <input v-model = "firstName" >
    {{ fullName }}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '健',
            lastName: '吴',
            fullName: '吴健'
        },
        watch: {
            firstName: function (val) {
                this.fullName = this.lastName + val
            },
            lastName: function (val) {
                this.fullName = val + this.firstName
            }
        }
    });
</script>
复制代码

另外呢watch属性是咱们经常使用的因此我就具体讲讲它的的高级用法--监听对象的属性变化:

1.监听对象须要深度监听 ,以下代码能够监听整个msg对象的变化

watch: {
&emsp;&emsp;msg: {
&emsp;&emsp;&emsp;&emsp;handler(newValue, oldValue) {
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;console.log(newValue)
&emsp;&emsp;&emsp;&emsp;},
&emsp;&emsp;&emsp;&emsp;deep: true
&emsp;&emsp;}
}
复制代码

2.监听对象里面某个属性的变化，经过computed作中间层实现

computed: {
&emsp;channel() {
&emsp;&emsp;&emsp;return this.msg.channel
&emsp;}
},
watch:{
    channel(newValue, oldValue) {
&emsp;&emsp;&emsp;&emsp;console.log('new: %s, old: %s', newval, oldVal)
&emsp;&emsp;&emsp;&emsp;//这里面能够执行一旦监听的值发生变化你想作的操做
&emsp;&emsp;}
}
复制代码

2.5 Vue组件

vue中有两个比较重要的概念一个是数据驱动上面咱们有讲到过,一个就是组件机制,接下来就详细介绍下Vue的组件

2.5.1 Vue引入组件的步骤

1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

        2.对组件进行注册,代码以下注册:
        Vue.component('my-component', {
        template: '

A custom component!

'
})

3.使用组件

下面贴个小例子:

Vue.component('componentName',{
    /*component*/ 
})；   
// 这里注意一点，组件要先注册再使用
Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name','title','city','content']        
}); 
var v=new Vue({      
    el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'     
    }
});
复制代码

2.5.2 如何让CSS只在当前组件中起做用

将当前组件的< style >修改成< style scoped >

2.5.3 组件中的 keep-alive 做用是什么

< keep-alive >< /keep-alive > 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免从新渲染。

大白话: 好比有一个列表和一个详情，那么用户就会常常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就能够对列表组件使用进行缓存.

这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是从新渲染

2.5.4 Vue组件封装的过程(文字描述)

首先，组件能够提高整个项目的开发效率。可以把页面抽象成多个相对独立的模块，解决了咱们传统项目开发：效率低、难维护、复用性等问题。

而后，使用Vue.extend方法建立一个组件，而后使用Vue.component方法注册组件。子组件须要数据，能够在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。能够采用emit方法。

2.6 组件之间的通讯

2.6.1 父子组件之间的通讯

父组件与子组件传值：Props

子组件向父组件传递数据: 子组件经过$emit方法传递参数,触发父组件event

2.6.2 Bus方法通讯

这个能够去看看我以前写的关于Bus通信的文章:

Vue eventbus 使用中的重复触发解决方案及存在的Bug

另外呢关于vuex通讯咱们放在下面讲解

2.7 Vue与Angular以及React的区别

组件基本上算是全面归纳了一下,另外呢Vue和其余两大框架Angular以及React有什么区别呢,咱们接下来就来说讲.

2.7.1 vue与angular的区别以及angular脏检查理解

2.7.1.1 vue与angular的区别

相同点：

        都支持指令：内置指令和自定义指令。
        都支持过滤器：内置过滤器和自定义过滤器。
        都支持双向数据绑定。
        都不支持低端浏览器。

不一样点：

1.AngularJS的学习成本高，好比增长了Dependency Injection特性，而Vue.js自己提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据作脏检查，因此Watcher越多越慢。 Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的。对于庞大的应用来讲，这个优化差别仍是比较明显的。

2.7.1.2 angular脏检查理解

在angular中你没法判断你的数据是否作了更改，因此它设置了一些条件，当你触发这些条件以后,它就执行一个检测来遍历全部的数据，对比你更改的地方，而后执行变化。
这个检查很不科学。并且效率不高，有不少多余的地方，因此官方称为脏检查。

2.7.2 Vue与React的区别以及 React / Vue 在组件中写 key的做用

2.7.2.1 Vue与React的区别

相同点：

        React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，二者都须要编译后使用。
        中心思想相同：一切都是组件，组件实例之间能够嵌套。
        都提供合理的钩子函数，可让开发者定制化地去处理需求。
        都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
        在组件开发中都支持mixins的特性。

不一样点：

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果作脏检查。
Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做DOM。

2.7.2.2 React / Vue 在组件中写 key的做用

在开发过程当中，咱们须要保证某个元素的 key 在其同级元素中具备惟一性。在 Diff 算法中会借助元素的 Key 值来判断该元素是新近建立的仍是被移动而来的元素，从而减小没必要要的元素重渲染。

2.8 Vue的路由实现：hash模式和 history模式

2.8.1 hash模式

在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特色：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动做，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号以前的内容会被包含在请求中，如 http://www.xxx.com，所以对于后端来讲，即便没有作到对路由的全覆盖，也不会返回 404 错误。

2.8.2 history模式

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端若是缺乏对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还须要后台配置支持……因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

2.9 Vue路由的钩子函数

        首页能够控制导航跳转，beforeEach，afterEach等，通常用于页面title的修改。一些须要登陆才能调整页面的重定向功能。
        beforeEach主要有3个参数to，from，next：
        to：route即将进入的目标路由对象，
        from：route当前导航正要离开的路由
        next：function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转。

2.10 Vue等单页面应用及其优缺点

优势：Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（若是要支持SEO，建议经过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可使用浏览器的导航按钮须要自行实现前进、后退。

3 Vue全家桶精讲

3.1 Vue-Cli的使用以及原理

3.1.1 Vue-Cli的使用

首先须要在命令行中进入到项目目录，而后输入：

vue init webpack Vue-Project
复制代码

其中 webpack 是模板名称，能够到 vue.js 的 GitHub 上查看更多的模板github.com/vuejs-templ…

Vue-Project 是自定义的项目名称，命令执行以后，会在当前目录生成一个以该名称命名的项目文件夹

配置完成后，能够看到目录下多出了一个项目文件夹，里面就是 vue-cli 建立的一个基于 webpack 的 vue.js 项目
而后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖

cnpm install
复制代码

而后启动项目

npm run dev
复制代码

打包上线

npm run build
复制代码

3.1.2 Vue-Cli的原理

这里就不详细介绍Vue-Cli原理了,贴一篇文章这篇文章讲原理讲的仍是比较细致的,Vue-Cli原理在以后的文章里我会单独拎出来跟你们详细讲解的,下面是文章地址

Vue-cli原理分析

3.2 Vue axios的使用

3.2.1 axios是什么以及怎么使用

请求后台资源的模块。npm install axios -S装好，而后发送的是跨域，需在配置文件中config/index.js进行设置。后台若是是Tp5则定义一个资源路由。js中使用import进来，而后.get或.post。返回在.then函数中若是成功，失败则是在.catch函数中

1.GET 请求

// 为给定 ID 的 user 建立请求
axios.get('/user?ID=12345')
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//换个姿式实现
axios.get('/user', {
    params: {                         //区别：  get是用params传值
      ID: 12345
    }
  })
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

2.POST 请求

axios.post('/user', {                  //        post是用对象传值      
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response=>{
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
复制代码

3.执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {      //两个参数分别表明返回的结果
                                                   // 当这两个请求都完成的时候会触发这个函数
  }));
复制代码

请求方法-别名列表

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

并发

axios.all(iterable)//iterable是一个能够迭代的参数如数组等

axios.spread(callback)//callback要等到全部请求都完成才会执行

3.2.2 结合 vue-axios使用

首先在主入口文件main.js中引用：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);
复制代码

以后就可使用了，在组件文件中的methods里去使用了：

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}
复制代码

这里一样以后我会专门出一篇文章来写axios的.

3.3 Vuex状态管理的属性以及特性以及实战

3.3.1 Vuex状态管理的属性

vuex分别有五种属性分别是 State、 Getter、Mutation 、Action、 Module

3.3.1.1 state

state为单一状态树，在state中须要定义咱们所须要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。

3.3.1.2 getter

getter有点相似vue.js的计算属性，当咱们须要从store的state中派生出一些状态，那么咱们就须要使用getter，getter会接收state做为第一个参数，并且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个须要派生状态的值）发生改变的时候才会被从新计算。

3.3.1.3 mutation

更改store中state状态的惟一方法就是提交mutation，就很相似事件。每一个mutation都有一个字符串类型的事件类型和一个回调函数，咱们须要改变state的值就要在回调函数中改变。咱们要执行这个回调函数，那么咱们须要执行一个相应的调用方法：store.commit。

3.3.1.4 action

action能够提交mutation，在action中能够执行store.commit，并且action中能够有任何的异步操做。在页面中若是咱们要嗲用这个action，则须要执行store.dispatch

3.3.1.5 module

module其实只是解决了当state中很复杂臃肿的时候，module能够将store分割成模块，每一个模块中拥有本身的state、mutation、action和getter。

3.3.2 Vuex状态管理的特性

3.3.2.1 vuex的State特性

        1、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于与通常Vue对象里面的data
        2、state里面存放的数据是响应式的，Vue组件从store中读取数据，如果store中的数据发生改变，依赖这个数据的组件也会发生更新
        3、它经过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

3.3.2.2 vuex的Getter特性

        1、getters 能够对State进行计算操做，它就是Store的计算属性
        2、虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用
        3、若是一个状态只在一个组件内使用，是能够不用getters

3.3.2.3 vuex的Mutation特性

        1、Action 相似于 mutation，不一样在于：
        2、Action 提交的是 mutation，而不是直接变动状态。
        3、Action 能够包含任意异步操做

3.3.3 Vuex的认知

vuex能够理解为一种开发模式或框架。好比PHP有thinkphp，java有spring等。经过状态（数据源）集中管理驱动组件的变化（比如spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

3.3.3 Vuex的实战

实战内容我在以前有写过文章介绍过,这里贴一个地址欢迎你们去看:

了解Vuex方法的使用初级篇

3.3 Vue-Router使用方法以及实战

3.3.1 Vue-Router的导航钩子以及它们的参数.

导航钩子有：

a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：

有to（去的那个路由）、from（离开的路由）、next（必定要用这个函数才能去到下一个路由，若是不用就拦截）最经常使用就这几种

3.3.2 Vue-Router定义动态路由以及获取传过来的动态参数

在router目录下的index.js文件中，对path属性加上/:id。

使用router对象的params.id。

3.3.3 Vue-Router嵌套路的定义

在实际项目中咱们会碰到多层嵌套的组件组合而成，可是咱们如何实现嵌套路由呢？所以咱们须要在 VueRouter 的参数中使用 children 配置，这样就能够很好的实现路由嵌套。 index.html，只有一个路由出口

<div id="app">  
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->  
    <router-view></router-view>  
</div>
复制代码

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，由于重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，固然子路由里面还能够继续嵌套子路由。

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

//引入两个组件 

import home from "./home.vue"  
import game from "./game.vue"  
//定义路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home组件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/game", component: game }  
        ]  
    }  
]  
//建立路由实例  
const router = new VueRouter({routes})  

new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})
复制代码

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，不然子路由没法显示。

<template>  
    <div>  
        <h3>首页</h3>  
        <router-link to="/home/game">  
            <button>显示<tton>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>
复制代码

game.vue

<template>  
    <h3>游戏</h3>  
</template>
复制代码

3.3.3 Vue-Router的导航钩子

全局导航钩子

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

组件内钩子

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

单独路由独享组件

beforeEnter

3.3.4 Vue-Router的组件

vue用来写路由一个插件。router-link、router-view

3.3.5 Vue-Router实战

仍是和上面同样推荐我写的文章:

浅谈Vue-router的部分高级用法

浅谈Vue-router使用方法及动态路由和嵌套路由的使用

总结

你们能看到这里仍是很是感谢的,毕竟能看我唠了这么久的同志,也是对个人这篇文章的承认吧,另外不建议的话给个赞加个关注,仍是谢谢了,毕竟新人创做不易,光是打字都用了一天,因此仍是指望各位大大们的关注,点评和点赞,若是有转发就更好了.

另外呢我写的有什么不到位的地方还望各位大神在评论区批评指正,感谢.

最后透露一点,下次的文章和算法之类有关,敬请期待,另外文章每一周到两周时间更新一篇,还望见谅,最近比较忙只能隔周更新,以后时间充裕的话会每周更新的,谢谢.