vue知识总结点

1.Vue的概念?

(1).vue是目前目前比较火、比较流行的框架。
(2).vue是目前三大主流框架之一， ReactJs  AngularJS
(3).Vue.js是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（渐进式：由浅入深 由易到难的方式）

2.Vue的特点??

易用、灵活、高效

3.Vue的优点??

（1）体积小
 (2)超快的虚拟dom
（3）更高的运行效率
（4）使用场景比较广泛
（5）开源.免费. 有详细的介绍文档

4.Vue全家桶???

基础语法 +Vue组件 +vue-cli +vue-router +vuex

5.为什么要学习流行框架???

(1).提高开发效率
(2).提高开发效率的发展历程：原生js-->jquery类库-->全端模板引擎-->AngularJS  /ReactJs  /vue(减少了不必要的dom操作，提高渲染效率；增加了双向数据绑定；通过指令，开发人员只注重业务逻辑，不用在关心dom如何渲染了)

6.类库.插件.组件.框架的区别???

类库:jquery  zepto   lodash   ...  提高了项目中常用的方法，相当于一个工具包，项目可以根据工具包快速开发
插件: swiper  superslider   ...     相当于将项目中的一部分功能封装。
组件:bootstrap  mui aui 相当于多个插件的集合体，包含Js,css跟结构，可以快速构建页面。
框架:  vue   react  angular   相当于类库和组件的集合体，提供大量的操作方法，结构，以及自己的思想，对项目的侵入性比较大，相当于如果项目更换框架，则需要重写整个项目。

7.声明式编程和命令式编程???

声明式编程:告诉机器你要什么，机器去做，告诉我们结果。类似于forEach
命令式编程:告诉机器你要什么，并告诉机器如何去做，最终出结果，类似   for循环。

8. 渐进式框架

渐进式：类库或者框架都是重量级的，里面包含很多方法，但是实际项目开发中，我们用不到这么多东西，所以在开发他们的时候，会把功能按照模块进行单独开发，使用者可根据自身情况选择一个模块一个模块的导入使用
    1）Vue：基础模块（基础语法、核心实现、组件开发、相关指令、过滤器、计算属性、生命周期等）
    2）Vue-router：构建SPA单页面应用的路由
    3）Vuex：公共状态管理
    4）Vue-cli：vue脚手架
    5）Components：vue element、iview、vuex...
        （VUE全家桶）

9.MVVM的思想???

MVVM是双向数据绑定,vue本身实现了视图和数据的相互监听影响
m是model  数据层，存储数据
v是view  视图层  展示数据
vm:是视图模型 viewModel 数据和视图的监听层或调度者 （当数据或者视图发生改变时，vm会监听到，同时会把相应的另外一层跟着改变或者重新渲染）viewModel 是一种创新，是一种真正结合前端应用场景的实现

数据层改变：vm会帮我们重新渲染视图
视图层改变：vm会帮我们把数据重新改变

M: model    数据层  放置数据  el中的元素需要使用的数据（保存控制区域的数据）
V: view   视图层
VM:视图模型/监听者/调度者
data:

data中可以放置任何数据类型
当vue实例创建时，会将data中的数据都放置再vue的响应式系统（相当于vue对象）
data中的属性相当于实例的属性
data中的数据都是响应式的    （当数据发生改变时，视图也会跟着改变）

10.指令:相当于一种属性 内置指令和自定义指令

内置指令：
        v-cloak:解决{{}}插值表达式带来的闪烁问题
        v-text:指令写文本   渲染文本（包含标签） 把标签元素当成纯文本输出
        v-html：渲染文本（不包含标签）  把标签元素的标签解析后输出
        v-bind: 指令给绑定已有属性   简写写法  属性之前加   ： (<a :href="baidu.com">百度</a>>)

自定义指令：

        v-on    绑定事件指令： 绑定事件  简写写法   @
            （1）可以写表达式   还可以调用
            （2）如果将方法在事件中调用，如果不传参则可以不添加（），如果传入的是字符串需要用引号引起来，否则会认为是变量
                如果有形参，不传实参，则第一个是形参是事件对象。
                如果需要传入参数，还需要事件对象，则传入实参 $event 代表事件对象

        v-for   循环数组和对象
            语法结构    v-for="(item,index) in arr"    item  当前项   index    当前项目的下标

            对于对象 v-for="(value,key,index) in obj"  value 属性值  key 属性 index 下标

            当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

            为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
       
        v-if和v-shw的区别：

        相同点:v-show 和 v-if 都能控制元素的显示和隐藏。


        不同点：
        v-if 

        v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

        v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

        相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

        一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
        v-show  根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。

        
        v-else 前一兄弟元素必须有 v-if 或 v-else-if。
        v-else-if   前一兄弟元素必须有 v-if 或 v-else-if。


        v-modl    在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

        双向数据绑定    p{{msg}}    <input type="text" v-model="msg">

        如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

        表单：

        click和change的区别

        click 点击事件  先进行事件处理 再进行数据更新 
        change  change事件 先进行数据更新  再进行事件处理


        表单修饰符：
        1).lazy
        在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：
        2).number
        如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
        3).trim
        如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

11.配置项：

    1.el:绑定挂载区域
    2.data:放置控制区域，所用数据
    3.methods:添加方法：业务逻辑/逻辑操作/操作数据
    4.computed:计算属性
        模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

        1）计算属性，属于属性，类似于data；
        2）计算属性和方法写法类似，在视图调用的时候不一样，方法说明。方法调用需要加（），计算属性调用不需要（），计算属性不可以使用在事件中。
        3）计算属性不可以与data同名
        4）如果计算属性与方法同名时，方法的优先级高
        5）计算属性的缓存机制————计算属性   第一次获取响应式数据时进行缓存，在后期重新渲染页面时，会观察响应式数据是否发生改变，如果没有发生改变，则读取数据，如果数据发生改变，则会重新调用计算属性，而只要重新渲染页面就会调用方法

    computed 和 methods 的区别？
        1、相同点
        1)如果作为模板的数据显示，二者能实现响应的功能，唯一不同的是methods定义的方法需要执行

        2、不同点
        1) computed 会基于响应数据缓存，methods不会缓存
        2)运行之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行
        3）可以用设置时间来观察methods和computed的变化，methods会一直执行，而computed只会调用一次



    5.watch:监听  监听数据发生改变时，视图跟着改变
        监听器/侦听器
        1）监听数据——当数据发生改变时，会有相应的操作
        2）监听的数据要在data中定义，他与computed中的getter是一样的，没有setter，不能定义
        3）一般在异步或者组件中使用
        
        deep：true  深度监听    对象属性发生改变时触发监听函数

        methods和watch和computer的区别 

        methods:
        在每次页面进行重新渲染的时候,都会去执行一次.

        computed:
        computed中的属性是自定义属性.自定义属性依赖来自data中的值来进行计算,从而返回一个新的值.
        computed和data相关,且computed的变量不可与data中的变量冲突.
        computed是可以监控到数组与对象的变化的.
        methods和watch没有缓存功能,computed有缓存机制,
        watch和methods可以用异步，computed一般不用异步

        watch
        watch中监听的属性需要是已经存在的.存在于data中,或者是computed中.
        watch中可以执行异步操作.一般使用watch做一些逻辑复杂或者是异步操作的事情.
        以及监听到这个数据变化之后去做一些别的事情.




    6.filters:过滤器
    Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
        全局定义过滤器和局部过滤器
        this指向window,value所要过滤的数据(写return)


    7.directives:自定义指令(全局和局部)
        钩子函数：相当于回调函数，当程序执行到某个阶段的时候去调用的函数
        1)bind：
            当指令绑定到元素上时，会立即执行bind函数，只执行一次
            不可以调用dom方法，只能操作属性。
            bind只在存在内存中，并没有真正绑定到dom
        2)inserted
            被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
            执行到此阶段代表已经插入到dom中，只执行一次.
        3)update
            所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
        4)componentUpdated    指令所在组件的 VNode 及其子 VNode 全部更新后调用
        5)unbind    只调用一次，指令与元素解绑时调用。
        在 bind 和 update 时触发相同行为，而不关心其它的钩子。


强制更新：$forceUpdate    销毁:$destroy

12.生命周期函数:

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

4个阶段： 创建  beforeCreate/created
         挂载   beforeMount/mounted
         更新   beforeUpdate/updated
         销毁   beforeDestroy/destroyed

1.beforeCreate:创建实例之前 此时data methods都没有初始化    
2.created:创建实例之后，此时data methods已经初始化(进入页面就要执行的异步请求)
3.beforeMount：渲染dom之前，（内存已经将模板写好，但是还没有渲染到页面中）
4.mounted：渲染dom之后，将模板插入页面，只渲染一次。
5.beforeUpdate：更新之前   数据发生改变时会调用该方法，获取数据是更新之前的数据  
6.Updated：更新之后        数据发生改变时会调用该方法，获取数据是更新之后的数据
7.beforeDestroy 销毁之前  可以获取数据  获取dom          写(vm.$destroy)销毁方法会走
8.destroyed    销毁之后   不可以获取数据    获取dom

9).第一次页面加载会触发哪几个钩子？
beforeCreate    created     beforeMount     mounted,


10)简述每个生命周期具体适合哪些场景？
beforecreate：可以加Loading事件。（loading事件主要用于加载页面之前的展示，多用于接口调用时。）

create：初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。可以在这里结束loading事件，还做一些初始化，或实现函数的自执行。
此时未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

mounted：此时完成挂载DOM和渲染，需要操作DOM的方法可以放在这里，也可在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeupdate：可在更新前访问现有的DOM，如手动移出添加的事件监听器。

updated:组件DOM已完成更新，可执行依赖的DOM操作。

注意：不要在此函数中操作数据（修改属性），会陷入死循环。

activated：在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

deactivated：<keep-alive></keep-alive>组件被移除时使用。
beforedestroy：销毁前，可以做一些删除提示，如：您确定删除xx吗？
destroy：销毁后，这时组件已经没有了，无法操作里面的任何东西了。

5.created和mounted的区别？
created:实例已经创建，但不能获取DOM节点。
mounted：模板已经挂载到页面上，可以操作DOM元素。

13：组件

1.组件是可复用的Vue实例，且带有一个名字.组件的出现为了拆分Vue的代码量，能够让我们通过不同的组件划分不同的功能，这样我就可以在实现不同的功能时，调用不同的组件.

1)使用组件的原因：提高代码的复用性。
2)全局组件的好处：那就是所有的 Vue 实例中，都可以使用这个组件。

2.组件化和模块化：

1)模板化：从代码的逻辑操作划分，将不同功能的代码逻辑划分成不同的模块，方便代码分层开发，方便后期对于代码的维护，确保了每个模块功能单一；

2)组件化：从UI设计角度出发划分的，前端组件化，为了方便UI组件重复使用.

    组件化相当于在模块化的基础上添加了页面结构  
    
3.组件： 全局组件/局部组件

1)先说为什么全局组件要在 Vue 实例之前就注册好？
    如果全局组件是在Vue实例之后注册，那么当Vue实例挂载到页面时，全局组件还没有注册，那么自然Vue实例中就不能使用全局组件了。
    全局定义组件名：
        Vue.component('my-demo',{template:``})
        1）：使用 kebab-case    Vue.component('my-component-name', { /* ... */ })
        2）：使用 PascalCase      Vue.component('MyComponentName', { /* ... */ })

2)所谓局部注册，就是说在某个 Vue 实例中注册，而不在全局注册。那么同理，局部注册的组件，只能在当前 Vue 实例中使用。
    局部定义组件名：
    1） components:{headModel:{template:'#headModel'}/components:{template:`<p></p>`}

4.全局变量和局部变量的区别如下：

1. 作用域不同：全局变量的作用域为整个程序，而局部变量的作用域为当前函数或循环等

2. 内存存储方式不同：全局变量存储在全局数据区中，局部变量存储在栈区

3. 生命期不同：全局变量的生命期和主程序一样，随程序的销毁而销毁，局部变量在函数内部或循环内部，随函数的退出或循环退出就不存在了

4. 使用方式不同：全局变量在声明后程序的各个部分都可以用到，但是局部变量只能在局部使用。函数内部会优先使用局部变量再使用全局变量

配置项：


Vue组件中的this指向的是VueComponent(全局组件和局部组件（无论局部组件嵌套多少层）);
Vue组件中 接收的属性渲染时优先级大于自己定义的优先级

template：放置模板（必选项）组件模板必须有一个根元素进行包裹，如果模板中放置多个元素则需要使用v-if  v-else-if进行连接

组件中data 为什么写成返回对象的函数形式？

    对象是引用数据类型，当多次调用组件时，数据对象指的是同一个对象的内存地址，当一个组件调用修改数据时，其他组件中的数据也会修改，如果使用返回对象的函数形式，每次返回一个新的对象，引用地址不同，所以相互之间不能影响

slot：插槽   包含调用组件时，组件标签中的内容、
什么是slot插槽？以及使用场景？
	插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让 你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。
    匿名插槽：我们也可以叫它单个插槽或者默认插槽。和具名插槽相对，它是不需要设置  name 属性的，它隐藏的name属性为default。
    具名插槽：就是slot 是带有name的，要用一个 template标签包裹
    作用域插槽 ：就是用来传递数据的插槽

传值：

1）父传子：子组件的props属性   可以接受父组件传入的属性值，基于属性传递的值。
在props中接收的属性和data是一样的，也是响应式数据，可以直接在视图中使用，相当于挂载在到组件实例上。（父传子：自定义属性）

2）子改父：基于自定义事件去传值，把父组件的方法，注册到任务队列中（@changeParent="change"）     $emit('')获取自定义事件传入的方法（事件名字要小写）

3)爷传孙子：vue实例中写
                        provide(){
                            return {
                                newTitle : this.list
                            }
                        }       对象函数传方法和属性
                
    孙子他爷接收：inject:['newTitle'];
    provide  indect  祖先和后代之间的通信
    provide     用于祖先元素 将传入子组件的数据 全部注入到provide
    inject      获取祖先元素的数据

4)兄弟组件之间的修改
    let eventBus=new Vue;       eventBus属于自定义名字
    1）传送：eventBus.$on('事件名'，方法名)       接收:eventBus.$emit(事件名)

5)$root，$parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过root访问得到的是根组件。

    $parent     $parent在子组件中调用父组件的方法跟data里设置的数据
    $children   
    他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

14.object

网址：(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties)

1)Object.defineProperties()      Object.defineProperty(obj,'name',{vale,configurable})
    概念:方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

    1)value   与属性关联的值。可以是任何有效的JavaScript值（数字，对象，函数等.

    2)configurable  当前属性是否可以被删除  false 不可以被删除  true是可以被删除    默认false(不可以删除)

    3)enumerable    当前属性是否可以被枚举  false 不可以枚举  true是可以枚举    默认false

    4)writable      当前属性是否可以被修改  false 不可以修改  true是可以修改    默认false

    5)get/set       严格模式下(use strict)必须同时存在
                    如果严格模式下，修改数据时，如果只有get会报错
                    如果ie低版本不支持set/get,用_defineSetter_和_defineGetter_来代替

2)响应式数据
    1)响应式数据   3.0之前是基于Object.defineProperty实现的

    2)vue内置 observer函数，将data中初始化的数据都设置了setter getter.

‘
3)设置对象的数据可响应 1)在data中对这个属性进行初始化
2)可以通过$set进行设置属性this.$set(this.obj,‘n’,1000)
4)对于数组可以直接设置 (this.arr[0]=10000)

15.vue-cli

1)概念:Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统
    Vue-cli:Command-line interface,命令行界面        
    创建Vue项目:vue create  起名     安装包:npm install -g @vue/cli     升级全局的vue-cli：npm update -g @vue/cli
    命令安装这个新的包:npm install -g @vue/cli

    通过 @vue/cli 实现的交互式的项目脚手架。
    通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
    一个运行时依赖 (@vue/cli-service)，该依赖：
        可升级；
        基于 webpack 构建，并带有合理的默认配置；
        可以通过项目内的配置文件进行配置；
        可以通过插件进行扩展。
        一个丰富的官方插件集合，集成了前端生态中最好的工具。
        一套完全图形化的创建和管理 Vue.js 项目的用户界面。
                       
2)创建项目          ctrl+c  两次退出
    e:——vue项目:开始  ——vue create frist-vue——选最后一个——Choose Vue version/ Babel/Router/Vuex/ CSS Pre-processors——2版本——y——Sass/SCSS (with dart-sass)——In package.json——y:起名字——cd:ftist-v\ue——npm run build

   2)npm 是 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码，管理项目依赖关系。
3)诠释:             运行项目：npm run serve
    1)dist 打包之后生成项目文件      命令： npm run build

    2)node_modules  存放项目的各种依赖    命令：  npm install(初始化实例)

    3)public 存放项目的静态文件

    4)public/index.html  模板文件  作用： 项目的入口文件

    5)src 存放各种vue文件

        src/assets：用于存放着各种静态文件，比如图片。

        src/components:用于存放公共组件，比如header、footer等。

        src/router/index.js：vue-router路由文件。需要引入src/views文件夹下的.vue，配置path、name、component。

        src/store/index.js：是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
        state:状态   相当于data保存数据
        mutations:改变状态  相当于方法
        actions:不能改变状态，走异步
        modules:模块

        src/views：用于存放各种页面，比如Login.vue，Home.vue。

        src/App.vue：是主vue模块，主要是使用router-link引入其他模块，App.vue是项目的主组件，所有的页面都是在App.vue下切换的。

        src/main.js：入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。

    6).gitignore：配置git上传想要忽略的文件格式。

    7)babel.config.js：是一个工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）。

    8)package.json：模块基本信息项目开发所需要的模块，版本，项目名称。

    9)package-lock.json：是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号

    安装所有依赖：npm install   +依赖名字   示例: npm install vue-router
    卸载所有依赖：npm uninstall   +依赖名字   示例: npm uninstall vue-router

4)具体操作:
    4)router-views    展示路由所对的组件内容   展示的主要内容
    在app.vue里边是这样的
    
    <router-link to="/">Home</router-link> |
    <router-view/>      <!-- 记住必须写 -->
    <router-link to="/about">About</router-link>

    5)style用的是scss样式:<style style scoped lang="scss"></style>
    6)scoped是仅供当前组件写的样式    如果不加则是公共样式

    1)views里的文件Home引入components组件里的文件:
    components下的文件默认导出：
            export default {
                name: 'HelloWorld',
                props: {
                msg: String
                }
            }
    views的文件导入:
            template里边要写标签: <HelloWorld/>
            import HelloWorld from '@/components/HelloWorld.vue'
            export default {
                name: 'Home',
                components: {
                    HelloWorld
                }
            }
    2)views里边创作一个页面的时候必须在router下的index.js里写路由
            二选一
        1)在上边写      import Home from '../views/Home.vue'
        2)在下边写
        {
            path: '/laobai',
            name: 'Laobai',
            component: () => import('../views/Laobai.vue')
        },
    
    3)views里的文件要跳转另一个文件示例:
    跳转页面:
        1)<router-link to="/">Home</router-link>
        
        2)template里边要写标签    
        使用代码切换路由地址
        <button @click="change">跳一跳</button>
            下边写:方法
                export default {
                    name: 'Home',
                    components: {
                    HelloWorld
                    },
                    methods:{
                        change(){
                            this.$router.push({         <!-- 跳转 -->
                                path:"/about"
                            })
                        }
                    }
                }
            两种方法：push和replace
            push和replace的不同点:
            push()方法:会添加新的历史记录
            replace()方法:不会添加新的历史记录
    4)router里边嵌套子路由:
        {
            path: '/',
            name: 'Home',
            component: Home,
            children:[
                {     <!-- 开始嵌套  children写数组 -->
                    path: '/about',
                    name: 'About',
                    component: () => import('../views/About.vue')
                }
            ]
        },
    store公共管理状态：
    5)组件拿到vueX里的属性
        vueX：
            export default new Vuex.Store({
                state: {
                loading:false,
                arr:[]
                },
                mutations: {
                setLoading(state,data){
                    state.loading=data;
                },
                setArr(state,data){
                    state.arr=[...state.arr,...data]
                }
                },
                actions: {
                getArr({commit}){
                    commit('setLoading',true)
                    setTimeout(()=>{
                    
                    commit('setLoading',false);
                    commit('setArr',['胡歌','靳东','王凯'])
                    },1000)
                }
                },
                modules: {
                }
            })
        components里的组件HelloWold拿:
            template中写：
            <template>
                <div class="hello">
                    <h1 v-if="loading">loading......</h1>
                    <ul class="list">
                    <li v-for="(item,index) of arr" :key="index">{{item}}</li>
                    </ul>
                    <button @click="getArr">getArr</button>
                </div>
            </template>
            script拿:
            <script>
                import {mapState,mapActions} from "vuex"
                
                export default {
                name: 'HelloWorld',
                props: {
                    msg: String
                },
                computed:{
                    ...mapState({
                    loading:'loading',
                    arr:'arr'   
                    })
                },
                methods:{
                    ...mapActions({
                    getArr:'getArr'
                    })
                }
                }
            </script>
            
    6)导入公共组件写法:
        标签中写:
            <HelloWorld></HelloWorld>
            <hello-world></hello-world>
            <HelloWorld/>
            <hello-world/>
        script里写:
            import Footer from "@/components/Footer.vue"
                export default{
                components:{
                    HelloWorld,
                    Footer
                }
            }
5)vuex
    1)概念:
        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
    2)Vuex 和单纯的全局对象有以下两点不同：
        1)  uex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

        2)  你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用
    3)actions
        方法的第一个参数是对象形式，包含调用mutations中方法的方式commit，调用当前actions中方法的方式dispatch， 第二个参数就是传入的数据
    4)你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
    5)如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
6)router
    用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js 
  1)重定向:
    {
        path:'*',               
        redirect:{name:'WoDe'}  <!-- 第一种方式 -->
        redirect:(to)=>{        <!-- 第二种方式 -->
            return 'WoDe'
          }
    }
    在以后的路由下边写别名:alias:"/m"也可以跳到本体

  2)路由模块:
    在router下创建一个router.shop.js
        import Shop from "@/views/shop/Shop.vue"    

        const routes=[
            {
                path:'/shop',
                name:'Shop',
                component:Shop
            },
        ]
        export default routes

    在主router中引入 
    上:import routerShop from "./router.shop.js"
    下:...routerShop
    在其他文件中引用时:
    <router-link :to="{name:'Shop'}">router-shop</router-link>  <!-- 记住name的时候一定要加引号，否则会报错 -->
   3)动态路由值:
    在路由模块中写：
        {
            path:'/shopA/:shopId?',      <!-- 动态路由值加 ：id名 -->
            name:'shopA',
            component:shopA,
            props:true,             <!--传输属性 -->
        },
        在文件中写
        export default{
            created(){
                console.log(this.$route)
                console.log(this.$route.params)
            },
            props:{                    <!-- 负责接收属性 -->
                shopId:String           <!--接收属性类型  -->
            }
            
        }
        在标签中写:
            <p>{{$router.params.shopId}}</p>    <!-- 负责展现-->
            <p>{{shopId}}</p>                   <!-- 负责展现-->
        
  4)静态路由值：
        {
            path:'/shopList',
            name:'shopList',
            component:shopList,
            props:{
                num:1000
            }
        },
        在文件中写
        <script>
            export default{
                props:{
                    num:Number
                }
            }
        </script>
        在标签中写:
                <p>{{num}}</p>
  5)全局前置守卫        使用 router.beforeEach 注册一个全局前置守卫
        to: Route: 即将要进入的目标 路由对象

        from: Route: 当前导航正要离开的路由

        next: 将要进入的页面    Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
        实例：
        router.beforeEach((to,from,next)=>{<!-- 
            console.log(to,'to')
            console.log(from,'from')
            console.log(next,'next') -->
            如何路由名字是我的时候，就跳到我的，不是就继续跳,该跳哪儿就跳哪儿，气死你
            if(to.name==="WoDe"){
                next('/shou')
            }else{
                next()
            }
        })
  6)路由的原字段
        实例：
            在wode的路由加上
            {
                path:"/my",
                name:'My',
                component:()=>import('../views/jd/My.vue'),
                meta:{
                    r:true
                }
            }
            在中路由里写判断:
            if(to.meta.r){
                <!-- next('/logn') -->          <!-- 第一种写法 -->
                next({                          <!-- 第二种写法 -->
                    path:'/logn'
                })
            }else{
                next()
            }
            判断是否有信息：
            if(to.meta.r){
                if(localStorage.token){
                    next()
                }else{
                    next({                         
                        path:'/logn'
                    })
                }
            }else{
                next()
            }
  7)全局解析守卫:
        router.beforeResolve((to,from,next)=>{
            console.log('全局解析守卫')
        })
  8)全局后置勾子:
        router.afterEach((to,from)=>{
            console.log('全局后置勾子')
        })
  9)路由独享守卫                    
        BeforeEnter((to,from,next)=>{    <!-- 全局前置守卫 --> <!-- 路由独享守卫 -->
            console.log('全局后置守卫')   <!-- 全局解析守卫 --> <!-- 全局后置守卫 -->
        })
  10)路由组件内的守卫
        进入:
        beforeRouteEnter(to,from,next){    <!-- 全局前置守卫 --> <!-- 路由独享守卫 -->
            console.log('路由组件内的守卫')     <!-- 路由组件内的守卫--进入 --> 
        })                         <!-- 全局解析守卫 --> <!-- 全局后置守卫 -->

        更新：
        beforeRouteUpdate(to,from,next){    <!-- 全局前置守卫 --> 
            console.log('路由组件内的守卫')     <!-- 路由组件内的守卫---更新 --> 
        }                             <!-- 全局解析守卫 --> <!-- 全局后置守卫 -->  

        离开:                                  
        beforeRouteLeave(to,from,next)     <!-- 路由组件内的守卫---离开 --> {                                                                                                   <!-- 全局前置守卫 --> <!-- 路由独享守卫 -->
            console.log('路由组件内的守卫')  
        }                          <!-- 全局解析守卫 --> <!-- 全局后置守卫 -->
    11)keep-alive:缓存组件，在切换时不被销毁
    不想文件被销毁，就在App.vue里 用keep-alive把<router-view></router-view>包起来
    
        <keep-alive><router-view></router-view> </keep-alive>
   )完整的导航解析流程
        导航被触发。
        在失活的组件里调用 beforeRouteLeave 守卫。
        调用全局的 beforeEach 守卫。
        在重用的组件里调用beforeRouteUpdate 守卫 (2.2+)。
        在路由配置里调用 beforeEnter。
        解析异步路由组件。 
        在被激活的组件里调用 beforeRouteEnter。
        调用全局的 beforeResolve 守卫 (2.5+)。
        导航被确认。
        调用全局的 afterEach 钩子。
        触发 DOM 更新。
        调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组

        
    全局守卫:router.beforeEach
    全局解析守卫：router.beforeResolve
    全局后置钩子：router.afterEach
    路由独享的守卫：beforeEnter(局部)
    组件内的守卫：beforeRouteEnter      进入
                 beforeRouteUpdate     更新
                 beforeRouteLeave      离开