vue2.x进阶知识点总结

组件化高级

注：可以先看vue基础篇

插槽

1.slot

组件模板定义的时候需要插槽的话给一对 <slot> </slot> 标签即可，在使用子组件的时候，组件内部填充的所有内容，元素就会被匹配到这个插槽上
本身 <slot> </slot> 可以给一个默认值，该默认值在使用这个组件没有给插槽内容的时候会自动使用

2.具名插槽 slot

组件模板定义的时候插入 <slot> </slot> 插槽，此时子组件被使用时候，内部插入内容就会匹配到这个插槽，因为二者都没有名字，因此能够匹配，当 <slot name='center'> </slot> 当定义模板使用插槽给插槽一个名字的时候，那么直接内部使用标签填充则不会匹配到这个插槽，只有当使用 slot=“center” 才能匹配到这个插槽如 <span slot='center'>我匹配到了</span>

注意： 2.6版本起该具名插槽方式已被废弃

新的具名插槽方式（**重点！！！！！！！！**2.6版本更新后用法）

组件模板定义的时候插入 <slot> </slot> 插槽，此时子组件被使用时候，内部插入内容就会匹配到这个插槽，因为二者都没有名字，因此能够匹配，当 <slot name='center'> </slot> 当定义模板使用插槽给插槽一个名字的时候，那么直接内部使用标签填充则不会匹配到这个插槽。此时在父页面使用 <template v-slot:center> </template> 来锁定这个name 为 center 的这个插槽。如果<slot> </slot> 没有name属性的话，其实Vue会给它一个默认的 name 为 default , 因此匿名插槽也可以通过 <template v-slot:default> </template> 来获取这个插槽

编译作用域

Vue 的编译作用域：首先看模板是谁的，那么这个范围内的变量就从谁那里找，因此子组件模板的作用域就是这个子组件，父组件的模板作用域就是这个父组件，Vue实例的作用域就是这个实例

作用域插槽( 2.6版本更新后用法 )

作用域插槽是slot 一个比较难理解的点

父组件替换插槽的标签，但是内容由子组件来提供的

1.和具名插槽一样，绑定了插槽之后，由于要获取子组件的数据，或者方法，因此 v-slot:子组件的name值=‘自定义一个名字（该名字用来接收子组件传递的数据）’

2.那么子组件如何将数据传递出去呢？？直接 :data = “传递的数据” 此时Vue内部会将父页面自定义的名字与这个 :data 数据绑定起来，此时父页面的 自定义名字 . data 就是这个 :data 我们就可以通过这个方式将数据传到父页面，供父页面使用

<body><div id="app"><cpn></cpn><cpn><template v-slot:data="slotProps"><h2>{{slotProps.user}}</h2></template></cpn></div><template id="cpn"><div><slot name="data" :user="pLanguages"><ul><li v-for="item in pLanguages">{{ item }}</li></ul></slot></div></template><script src="./lib/vue.js"></script><script>const app = new Vue({el: "#app",data: {},methods: {},components: {'cpn': {template: '#cpn',methods: {show() {return console.log(123);}},data() {return {pLanguages: ['JavaScript', 'C', 'C++', 'Java', 'C#', 'Pathon'],user: {lastName: '123',firstName: 'wyj'}}}}}})</script>
</body>

此处存在版本问题，后期需要搞清楚

Vuex是做什么的？

官方解释：Vuex是专门为Vue.js应用程序开发的状态管理模式

它采用集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
Vuex也集成 Vue的官方调试工具 devtools extension 提供了诸如零配置的 time-travel 调试，状态快照导入导出等高级调试功能

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透
其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用
那么，多个组件是不是就可以共享这个对象的所有变量属性了呢

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道不能自己封装一个对象来管理么

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢，没错，是响应式
如果你自己封装实现一个对象能不能保证他里面所有的属性做到响应式呢？当然可以，但是自己封装稍微有些麻烦
不用怀疑，Vuex 就是为了提供这样一个在多个组件之间共享状态的插件，盘他就好了

管理什么状态呢？

但是，有什么状态时需要我们在多个组件共享的呢？

如果你做过大型开放项目，一定遇到过多个状态在多个界面之间的共享问题
比如用户的登录状态、用户名称、头像、地理位置信息等等
比如商品的收藏，购物车中的物品等等
这些状态信息，我们都可以放在同一的地方对他进行保存和管理，而且他们还是响应式的

Vuex使用

1.Vuex就相当于一个仓库，管理公共的一些东西

2.本身Vuex 就是vue的一个插件，说到插件我们就想到了如何去使用一个插件

先通过 npm install vuex --save 安装这个插件
然后和 vue-router 一样在src文件夹下创建 store 文件夹，在这个文件夹下创建 index.js 文件进行插件的配置
导入 Vue 导入 Vuex, 通过Vue.use使用 Vuex, 然后通过 new Vuex.Store( ) 得到一个仓库管理的实例，然后将这个实例导出
在main.js中导入，再挂在到 vue实例上。此时就相当于在 vue.prototype 上注册了 store ，全局都可以使用了
那么new 这个实例的时候传入一个对象，对象中固定的一些属性是什么呢？
state: { } 状态管理，里面可以存储一些公共的数据，另外还有一个单一状态树的概念
mutations: { } 普通数据的修改需要通过这个，能够对数据修改进行跟踪
actions: { } 修改异步操作经过actions，然后再通过mutations去做
getters: { } 类似于组件中计算组件
modules: { } 划分模块，再进行相关数据保存

如果修改仓库中的数据

虽然可以直接通过 $store.state.数据进行修改，但是我们不建议这么操作，因为这样操作，我们没有办法跟踪监测到是谁更改了仓库的这个数据，因此我们不能够直接这样做。那么我们就需要间接操作了。

在new实例时候传入mutations, 这个对象中可以传入如何修改仓库中的数据
然后在需要修改数据的地方通过 this.$store.commit( ‘mutations中定义的方法即可’ )

const store = new Vuex.Store({state: {count: 10},mutations: {increment(state) {state.count++},decrement(state) {state.count--}},actions: {},getters: {},modules: {}
})

 methods: {addition() {this.$store.commit('increment')},substraction() {this.$store.commit('decrement')}},

state单一状态树

Vuex提出使用单一状态树，什么是单一状态树呢?

英文名称是Single Source of Truth

就是一个项目中就创建一个仓库，store，不要创建多个，不方便管理

getters属性

该属性跟组件中的 computed属性基本一致，当我们多次使用到一个计算属性的时候，并且计算属性的数据也是存在仓库中的话，我们就可以在getters中定义

首先我们在全局中是通过 $store.getters 点出这个计算属性进行应用的
定义一个getters中的计算属性的时候，传递一个参数 state,需要手动传，第一个参数是 state 第二个参数是getters
因此在仓库中其他计算属性中使用到另一个计算属性的话可以通过第二个参数去拿到这个属性
当需要调用仓库计算属性传递一个参数的时候，则我们在计算属性中可以返回一个函数，该函数可以接受一个参数，进行相应操作，这样就解决了需要传递参数的问题

getters: {more20age(state) {return state.users.filter(s => s.age > 20)},more20ageLegth(state, getters) {return getters.more20age.length},moreAge(state) {return age => {return state.users.filter(s => s.age > age)}}},

<h2>全部对象：{{ $store.state.users}}</h2>
<h2>大于20岁：{{ $store.getters.more20age}}</h2>
<h2>大于20人数：{{ $store.getters.more20ageLegth }}</h2>
<h2>大于?岁人数：{{ $store.getters.moreAge(30) }}</h2>

getters 辅助函数 mapGetters

当我们想直接在组件中使用 store中的计算属性，则我们可以导入vuex 中的辅助函数 mapGetters
第一步：通过 impotent {mapGetters} from 'vuex' 在需要使用的组件中导入这个辅助函数
第二步：在该组件的 computed中注册，通过 ...mapGetters( )的方法注册，可以传入一个对象，也可以传入一个数组
- 当传入对象时候，key便是getters 中方法的别名，当传入数组的话，数组中的参数就是 getters 中的计算属性名
注册好之后就可以在该组件中直接使用注册过的 getters 中的计算属性

Mutation传递参数

在通过mutation 更新数据的时候，有时候我们希望携带一些额外的参数

参数被称为是mutation的载荷（Payload）

Mutation中的代码

decrement(state, n) {state.count -= n
}decrement: () => {this.$store.commit('decrement', 2)
}

当然参数不是一个的时候，也可以传递的是一个对象，数组

另一种提交风格

addition(n) {if (typeof n === 'object') n = 1this.$store.commit({type: 'increment',count: n})}increment(state, payload) {state.count += payload.count},

不同点：这种方式提交的时候不是传两个参数了，是直接传递一个对象，type决定使用 mutation中的哪个处理方法，另一个属性则保存传递进来的数据，mutation中接收的时候则直接通过 payload ，拿到的是整个{ count : n } 对象，要是用传递的参数，只需要 payload.count 即可

Mutation响应规则

Vuex的store中的state是响应式的，当state中的数据发生变化的时候，Vue组件会自动更新

这就是要求我们必须遵守一些Vuex对应的规则：

提前在store中初始化好所需的属性
当给state中的对象添加新属性的时候，使用下面的方式
- 方式一：使用Vue.set(obj,'newProp',123)
- 方式二：用新对象给旧对象重新赋值

也就是说关于对象的响应式 vue能做到通过点属性的方式更改已有的属性做到响应式，但是在点新属性添加属性的时候不能做到响应式，以及使用 delete 删除已有属性的时候不能做到响应式，此时我们就需要通过vue内部的方法去实现

解决方案

Vue.set(obj,'newProp',123) 传递三个参数，第一个是需要更改，添加的对象，不论是数组对象，还是普通对象，第二个参数可以使一个 key也可以是一个 index，第三个是要添加或者修改的值。

Vue.delete(obj,'newProp') 这种方式删除可以做到响应式

Mutation同步函数

通常情况下，Vuex要求我们Mutation中的方法必须是同步方法

主要的原因是当我们使用devtools时，可以dectools可以帮助我们捕捉 mutation的快照
但是如果是异步操作，那么devtools 将不能很好的追踪这个操作什么时候被完成

Action 的基本定义

我们强调，不要在Mutation中进行异步操作

但是某些情况，我们确实希望在Vuex中进行一些异步操作，比如网络请求，必然是异步的，这个时候怎么处理呢？
Action类似于Mutation，但是是用来代替Mutation进行异步操作的

当需要异步操作数据的时候，首先要明白，操作state的一定是Mutation ，而不能直接由 Action操作。按照官方的示意图，action的操作就是异步，然后通过拿到上下文 context, 此处的context可以看做state, Action中通过 commit提交给 Mutation, 那么其他组件需要怎么传递给Action呢？只需要通过 this.$store.despatch() 提交给Action即可

 reviseInfo() {this.$store.dispatch('aUpdataInfo')},

  actions: {aUpdataInfo(context) {setTimeout(() => {context.commit('reviseInfo')}, 1000)}}mutations: {reviseInfo(state) {state.star.name = '谢霆锋'}}

那么我们怎么在使用的组件内拿到是否更改成功呢？？有两种方式：

一种通过传递函数的方式，然后在Action中通过回调函数拿到成功。当需要传递参数的话，那我们可以先传递一个对象。对象中又传递的数据，也包括需要拿成功的回调函数
通过Promise，Action中我们返回一个Promise对象，然后执行异步操作，最后调用成功resolve，并且可以通过resolve传递数据给组件，由于组件是通过this.$store.dispatch（） 来调用Action中的函数，因此我们拿到的就是返回的那个Promise对象，此时我们在这个Promise对象后面通过 .then的方式拿到成功的回调，并且接收仓库通过 resolve 传递过来的数据

两种方式都可以解决，但是当然是推荐优雅的Promise写法咯

认识Module

Module是模块的意思，为什么在Vuex中我们要是用模块呢？

Vue是用单一状态树，那么以为着很多状态都会交给Vuex来管理
当应用变的非常复杂的时候，store对象就有可能变得相当臃肿
为了解决这个问题Vuex允许我们将 store 分割成模块，而每个模块拥有自己的state、mutations、actions、getters等

我们之前说过state的单一状态树 , 但是当我们new Vue.Store中的数据越来越多，那么我们将很难去管理，因此我们就需要对其中的代码进行归类管理。这时就可以用到 module这个属性了

通过 modules: {a: moduleA } 可以定义a这个模块，此时a 就会直接挂在到state属性中，我们想要拿moduleA中定义的数据的话，只需要执行 this.$store.state.a.属性即可
模块中使用mutations的话跟 new Vuex.Store中使用mutations是一样的，因为本身mutations名字就不会起重复的，那么如果没有异步操作，依旧还是组件中通过this.$store.commit('mutations方法',传递的参数) 方法进行处理
如果是异步的话，则还是需要通过 this.$store.dispatch('actions方法',传递的参数),然后actions中通过commit方法提交给 mutations，然后mutations 再进行处理数据. 注意此处actions下方法拿到的参数 context （上下文），此时的他并不像根模块中actions一样上下文是state,这个 context.commit 是针对当前模块提交，他包含很多属性，处理commit。还有rootState rootMutations 等
getters用法还是跟原来一样，不需要通过 a拿，第二个参数还是getters 不论是模块内，还是根模块都是通过 getters 点去拿到，但是要拿根模块下的 state中的数据的话，就需要传入第三个参数 root了，通过 root.count才可以拿到根模块state 下的count值

ES6对象的解构

const obj = {name : 'jack',age : 18,gender : '男'
}// 普通拿到这个对象中的属性
const name = obj.name
const age = obj.age
const gender = obj.gender// es6对象的解构方式
const {name,gender,age} = obj
// 这行代码跟上面三行效果一样

Vuex-store文件抽取

由于我们store 文件夹下的index文件中代码很臃肿， state ， mutations ,actions,getters，modules都放在一起，这样不方便管理，因此我们将他们都可以抽离出去，形成单独单一属性的文件

axios

为什么选择axios

Vue中发送网络请求有非常多的方式，那么，在开发中如何选择

选择一： 传统的Ajax是基于 XMLHhttpRequest(XHR)

为什么不用他呢
- 非常好解释，配置和调佣方式等非常混乱
- 编码起来看起来就非常蛋疼
- 所以真实开发中很少直接使用，而是使用jQuery-Ajax

**选择二：**在前面的学习中，我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用

为什么不选择它

首先，我们先明确了一点：在Vue的各种开发中都是不需要使用jQuery了
那么，就意味着为了方便我们进行一个网络请求，特意引用了一个jQuery，不是很合理
jQuery代码 1w+ 行 Vue代码也才1w+行
完全没有必要为了用网络请求就引用这种重量级的框架

**选择三：**官方的Vue-resouse

Vue2.0后，就不再更新，使用的话会有很大隐患

**选择四：**在说明不再继续更新维护Vue-resouse后，Vue作者推荐了一个框架 axios

axios有非常多的优点并且用起来很方便
可以在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求，（jQuery中的ajax不能再node环境中运行）
支持Promise API
拦截请求和响应
转换请求和响应数据

jsonp

在前端开发中，我们一种常见的网络请求方式就是JSONP

使用JSONP最主要的原因往往是为了解决跨域访问的问题

JSONP的原理是什么呢？

JSONP的核心在于通过 script 标签的src来帮助我们请求数据
原因是我们的项目部署在 domain1.com 服务器上，是不能直接访问 domain2.com服务器上的资料的
这个时候，我们利用 script 标签的src 帮助我们去服务器请求到数据，将数据作为一个javascript的函数来执行，并且执行的过程中传入我们需要的json
所以封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称

axios请求方式

基本请求方式

axios( config )
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,可以放入多个请求的数组
axios.all([ ])返回的结果是一个数组，使用axios.pread 可将数组[res1,res2]展开为res1,res2

使用axios，

首先需要明白 axios本身是第三方的一个对ajax封装的框架，因此vue中想要使用，则需要导入，其次我们不仅仅是开发时候需要用到，发送求这种事，我们项目运行上线之后还是会用到因此需要安装为内部依赖

npm install axios --save
然后通过 import axios from ‘axios’ 导入后就可以使用我们的 axios了

简单的使用：

axios({url: "http://123.207.32.32:8000/home/multidata"
}).then(res => {console.log(res);
})

传递query参数的使用

axios({url: "http://123.207.32.32:8000/home/multidata",params: {type: 'sell',page: 5}
}).then(res => {console.log(res);
})

发送并发请求 注意多个axios之间需要用数组包裹起来

axios.all([axios({url: "http://123.207.32.32:8000/home/multidata"
}), axios({url: "http://123.207.32.32:8000/home/data"
})]).then(res => {console.log(res);
})

此时拿到的res是一个数组，包含了每次请求到的数据对象，如果需要分别拿到的话需要使用axios.spread(res1,res2) 方法

axios.all([axios({url: "http://123.207.32.32:8000/home/multidata"
}), axios({url: "http://123.207.32.32:8000/home/data"
})]).then(axios.spread((res1, res2) => {console.log(res1);console.log(res2);
}))

axios全局配置

上面的示例中，我们的BaseURL是固定的

事实上，在开发找那个可能很多参数都是固定的
这个时候我们可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.headers.post['Content-Type'] = 'appliaction/x-www-form-urlencoded'
axios.defaults.timeout = 5000axios.all([axios({url: "/home/multidata"
}), axios({url: "/home/data"
})]).then(axios.spread((res1, res2) => {console.log(res1);console.log(res2);
}))

常见的配置选项

请求地址 url:’/user’
请求类型 method: 'get
请求根路径 baseURL:'http://www.mt.com/api’
请求前的数据处理 transformRequest:[function(data){ }]
请求后的数据处理 transformResponse:[function(data){ }]
自定义的请求头 headers: {'x-Requested-With ':‘XMLHttpRequest’}
URL查询对象 params:{ id :12 }
查询对象序列化函数 paramsSerializer:function(params){ }
request body data: { key: ‘aa’ }
超时设置s 单位毫秒 timeout : 1000
跨域是否带Toke withCredentials: false
自定义请求处理 adapter: function( resolve,reject, config )
身份验证信息 auth: { uname: ’ , pwd: ‘123’}
响应的数据格式 json/ blob/ document /arrybuffer/text/stream
- responseType: 'json’

!!!不要在项目中直接使用第三方框架，自己进行一定封装

axios的实例

当我们从axios模块中导入对象的时，使用的实例是默认的实例
当给该实例设置一些默认配置的时，这些配置就被固定下来了
但是后续开发中，某些配置可能会不太一样
比如某些请求需要使用特定的baseURL或者 timeout 或者 content-Type等
这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息

那么如何创建呢？？

只需要使用 axios.create({ config })即可，这个实例我们之后就可以直接去调用它去请求数据，当有其他不一样的请求的时候，只需要在实例化一个传入相应的 config配置即可

axios模块的封装

首先我们为什么要封装axios?

因为axios是第三方的框架，如果直接在组件中使用，有一天这个框架出现问题了，不能使用了等。那么我们就需要到各个组件中去修改相应的代码，这是要死的节奏啊。因此我们需要一种方式解决这个问题

什么方式解决呢？

假设我们在一个文件中使用axios 配置请求数据，将其封装为我们自己使用的框架，那么组件中通过跟这个文件之间沟通，拿到服务器的数据，此时一旦axios 框架不能用了，那么我们就可以在这个文件中，将封装的axios 改为其他可用的框架，只要这个框架可以拿到服务器数据就可以，而我们也只需要改这个文件就好，因为这时候的组件中只关心我们返回的数据，并不会关心是用什么框架返回的，这样即使第三方的框架出了问题，我们修改代码也是一件很简单的事情

那么怎么封装呢？

因为我们是有可能需要多个不同的 axios实例的，因为可能数据不再一个服务器，或者说对一些config配置有不同要求，因此导出的方式最好不要是export default 因为这个导出只能导出一个对象，我们可以 export function request1(config){} 导出即可
我们知道发送请求肯定需要组件传入config配置再发送，因此导出的这个方法需要传递参数的 config
之后我们内部怎么处理呢？内部肯定是根据config 配置去发送请求拿到项数据啊
首先由于我们可能会用到不同默认配置的axios请求，因此我们不能直接使用全局的axios来发送请求，否则会出现后续一些问题
那么我们就需要创建一个axios的实例了，怎么创建， axios本身提供了方法，axios.create( )

// 我们通过const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})

有了这个实例后，我们就可以通过instance( config ).then( res => { }) 拿到数据了

那么来了新的问题，现在返回的数据是在定义的这个文件中，我们想要的是组件拿到数据，因此这个 request方法需要传递其他参数，该参数是一个回调函数，通过回调函数的形式，在拿到数据的时候，通过这个函数传参的形式将我们的数据返回到组件

export function request(config, success) {const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})instance(config).then(res => {success(res)})
}

当然也可以在传递config的时候我们就传递个对象，对象中放了请求的一些 url等一些数据，同时包含回调函数，用于在文件中通过回调的形式拿到数据
当然也可以通过 Promise的优雅方式实现

import axios from 'axios'export function request2(config) {return new Promise((resolve, reject) => {const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})instance(config).then((res, err) => {resolve(res)reject(err)})})
}export function request3(config) {const instance = axios.create({baseURL: 'http://123.207.32.32:8000',timeout: 5000})return instance(config)
}

源码中本身 axios.create创建的实例返回的就是一个Promise对象因此我们可以直接将其返回，然后组件中调用该方法，通过点then 点 catch 的方式去拿到返回的数据

1.创建axios的实例，通过axios.create({ 配置对象}) 创建

2.执行这个实例函数，源码中这个函数返回的就是一个promise 对象，因此直接返回 return instance( config )

3.然后在调用的组件中使用 .then的方法去拿到返回的数据

使用拦截器（interceptors）

axios 提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理

axios 为了对数据进行进一步的控制，我们可以在发送请求，和接收请求的时候对象发送和接收进行一个拦截，拦截的作用就是为了对发送请求或者接收数据进行一些处理。

怎么使用呢？？？？

当然是在定义请求这个方法的时候使用咯，我们定义了axios的实例，在返回数据前进行拦截
通过实例的 interceptors属性中的 request 或者 response 中的 use 方法来拦截
一种是发送请求的拦截，一种是接收返回数据的拦截，两者皆有成功和失败

instance.interceptors.request.use(config => {},error => {})
instance.interceptors.response.use(res => {},error => {})// 首先 两者拦截下来数据进行处理然后 需要再返回，否则 请求无法正常进行下去，
// 其次我们拦截数据要有目的