1.生命周期函数
1.1 什么是生命周期函数
我理解的生命周期函数就是 vue 实例从创建到销毁的过程中,到了某一个特定的时间节点会自动触发的钩子函数 常用的钩子函数一共有八个
beforeCreate 创建前 实例还未创建
created 创建后 这个第一个能拿到 date 和 methods 来用的钩子函数
beforeMount 挂载前 挂载的是节点
mounted 挂载后 以上四个是创建阶段的钩子函数 这些钩子函数只会执行 1 次
beforeUpdate 数据变了视图未更新
updated 数据变了 视图更新 更新阶段的钩子函数会执行 0 次或者无数次
beforeDestory 销毁之前 最后一个能使用 data 和 methods 的钩子函数
destoryed 销毁之后 销毁阶段的钩子函数 执行 1 次
除了这八个还有
内置组件keep-alive里有俩分别是:
actived 激活缓存组件
deactived 停用缓存组件
最后一个是子组件的
errorCaptured 子组件出错的时候触发
1.2 在项目开发过程中哪些钩子函数用的比较多
一般请求数据我们用created生命周期函数(vue的生命周期函数又俗称vue钩子函数)比较多,因为created钩子函数是vue实例刚创建成功后,现在是最早能拿到data数据的时候,当然 mounted也可以去请求数据 也可以拿到data数据 但是区别是,mounted是vue实例挂载后才触发的,说白点就是dom元素现在才能拿得到,相比较着created要晚的多,当然 如果你是用ECharts图表的话,那么请求数据什么的就可以用mounted了 , 因为ECharts图表需要先获取dom节点,再去渲染数据,所以,用那个钩子函数取决于你要用来做什么 ,什么东西都不是一成不变的,就比如 nextTick 这个方法,用它可以来延迟回调函数,使用nextTick方法可以在created里拿到dom节点,可以理解为把同步代码变成异步来执行
1.3 父组件和子组件的生命周期函数的执行顺序
父组件的创建前
父组件的创建后
父组件的挂载前
子组件的创建前
子组件的创建后
子组件的挂载前
子组件的挂载后
父组件的挂载后
2.nextTick
在 dom 更新之后执行的延迟回调 ,在 vue 中 dom 的更新是异步的,我理解的 nextTick 是把本身同步的代码变成异步执行,排在 dom 更新之后,所以能拿到 dom 节点
3.vuex
3.1 什么是 vuex 能解决什么问题
vuex 是 vue 的状态管理工具,能解决组件之间数据共享的问题
3.2 五大核心以及怎么调用
state 存放数据的地方 this.$store.state.xxx
mutations 修改state的地方 this.$store.commit()
getters 计算 state 的地方 this.$store.getters.xxx
actions 发送异步请求的地方 this.$store.dispatch()
modules 模块化 把数据分模块管理
3.3 vuex 的语法糖辅助函数
mapState mapMutations mapActions mapGetters
先引入 然后展开使用 mapState 和 mapGetters 在计算属性下展开 mapActions 和 mapMutations 在 methods 下展开 展开的时候用扩展运算符...展开
3.4 vuex 的执行机制
如果要修改 state,先通过 dispatch 调用一个 action 再在 action 里通过 commit 调用一个 mutations 修改 state
3.5 vuex 的弊端
不过 vuex 也有⼀些弊端,⽐如浏览器刷新的时候,vuex 的数据会丢失,我们⼀般结合本地存储来解决,当我们在 mutations ⾥⾯改变 state 的时候在通过 localStorage 或者 sessionStorage 或者持久化插件存储到本地,然后在 state 的状态的属性值那块写⼀个三元表达式,如果本地存 在数据的话则读取本地存储的数据,否则就赋值为 null 具体存了本地存储怎么拿来用:
在state中;
// list:JSON.parse(localStorage.getItem("list"))||[],
list: localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
3.6 怎么开启严格模式
跟 state 同级的地方 设置 strict: false,
如果开启了严格模式 只能在 mutations 中修改 state 否则就会报错
3.7 modules
当在 vuex 中存储的数据很多的时候 需要用 modules 来分模块管理
首先新建一个模块的 js 文件
里面有四大核心 state mutations actions getters
并且要开启一个命名空间 namespaced:true
然后在 index.js 中引入 这个 js 并在 modules 中注册模块
用的时候 this.$store.state.a.arr 这就是调用模块a下面的arr this.$store.commit("a/add") 这个就是调用模块 a 下面的 add 方法
4. vue 路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解
⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history. 他们的区别是 hash 模式不 会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会 报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 psuhState 和 replaceState 来完成的. 以上就是我对 vue 路由模式的理解.