Vue阶段复盘总结

生命周期

声明周期简介

• 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
• 生命周期函数中的this指向是vm 或 组件实例对象
  

常用的声明周期钩子

• mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】。
• beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等【首尾工作】。

路由新增的两个声明周期钩子

• activated路由组件被激活时触发。
• deactivated路由组件失活时触发。

全局事件总线 （GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：

new Vue({
 ......
 beforeCreate() {
  Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
 },
    ......
}) 

3.使用事件总线：
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

提供数据：this.$bus.$emit(‘xxxx’,数据)
4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

路由

1.理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2.前端路由：key是路径，value是组件。

基本使用

1.安装vue-router，命令：npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
 routes:[
  {
   path:'/about',
   component:About
  },
  {
   path:'/home',
   component:Home
  }
 ]
})

//暴露router
export default router

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3.每个组件都有自己的$route属性，里面存储着自己的路由信息。4.整个应用只有一个router，可以通过组件的$router属性获取到。

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
 console.log('beforeEach',to,from)
 if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
  if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   next() //放行
  }else{
   alert('暂无权限查看')
   // next({name:'guanyu'})
  }
 }else{
  next() //放行
 }
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
 console.log('afterEach',to,from)
 if(to.meta.title){ 
  document.title = to.meta.title //修改网页的title
 }else{
  document.title = 'vue_test'
 }
})

独享守卫:

beforeEnter(to,from,next){
 console.log('beforeEnter',to,from)
 if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
  if(localStorage.getItem('school') === 'atguigu'){
   next()
  }else{
   alert('暂无权限查看')
   // next({name:'guanyu'})
  }
 }else{
  next()
 }
}

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

hash模式：

1.地址中永远带着#号，不美观 。
2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3.兼容性较好。

history模式：

1.地址干净，美观 。
2.兼容性和hash模式相比略差。
3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vuex

1.概念

​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

​ 多个组件需要共享数据时

3.搭建vuex环境

1.创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
 actions,
 mutations,
 state
})

2.在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
 el:'#app',
 render: h => h(App),
 store
})

4.基本使用

1.初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
 jia(context,value){
  // console.log('actions中的jia被调用了',miniStore,value)
  context.commit('JIA',value)
 },
}

const mutations = {
    //执行加
 JIA(state,value){
  // console.log('mutations中的JIA被调用了',state,value)
  state.sum += value
 }
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
 actions,
 mutations,
 state,
})

2.组件中读取vuex中的数据：$store.state.sum3.组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据) 或 $store.commit(‘mutations中的方法名’,数据)