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

16,095 阅读32分钟

前言

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

正文

1  Vue 3.0 和 Vue 2.0的对比

1.1  Vue 3.0的新特性以及原理

1.1.1  观察机制

        简述:更完备、更精准、更高效,可以对响应式跟踪进行调试,新增了一个创建可观察对象(observable)的 API。

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

  • 可以检测属性的新增和删除
  • 可以检测数组索引的变化和 length 的变化
  • 支持 Map、Set、WeakMap 和 WeakSet
  •         上面正文中提到的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快 100%还有就是快一倍 / 减少一般的内存使用

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

    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 (读取) 行为重新做了修改。

            当我们访问对象内原本存在的属性时,会返回原有属性内对应的值,如果试图访问一个不存在的属性时,会返回0 ,即我们访问 proxyObj.a 时,原本对象中有 a 属性,因此会返回 1 ,当我们试图访问对象中不存在的 b 属性时,不会再返回 undefined ,而是返回了 0 ,当我们试图去设置新的属性值的时候,总是会返回 888 ,因此,即便我们对 proxyObj.a 赋值为 666 ,但是并不会生效,依旧会返回 888!

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

    新的观察者还有以下特点:

  • 提供了一个创建可观察对象的 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 调用时被调用。这样一来,插槽中的依赖会被认为是子组件的依赖而不是父组件的依赖。这意味着:1、当插槽内容变化时,只有子组件重新渲染;2、当父组件重新渲染时,如果插槽内容没有变化,子组件就不需要重新渲染。这个特性提供了更精确的组件树层面上的变更检测,所以会减少很多无用的渲染。

            自定义 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特性

            一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
            二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
            三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

    3.3.2.2 vuex的Getter特性

            一、getters 可以对State进行计算操作,它就是Store的计算属性
            二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
            三、 如果一个状态只在一个组件内使用,是可以不用getters

    3.3.2.3 vuex的Mutation特性

            一、Action 类似于 mutation,不同在于:
            二、Action 提交的是 mutation,而不是直接变更状态。
            三、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使用方法及动态路由和嵌套路由的使用

    总结

            大家能看到这里还是非常感谢的,毕竟能看我唠了这么久的同志,也是对我的这篇文章的认可吧,另外不建议的话给个赞加个关注,还是谢谢了,毕竟新人创作不易,光是打字都用了一天,所以还是期望各位大大们的关注,点评和点赞,如果有转发就更好了.

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

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