1. vue⽣命周期? (必问)
# 一.生命周期
## 1.什么是生命周期函数
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发
我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发
## 1.1 生命周期函数有哪些
创建阶段
- beforeCreate：实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this
- created：创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了
- beforeMount：组件挂载之前
-mounted：组件挂载之后
这个时候能拿到 dom 节点使用
运行阶段
只要修改 data 就会触发
beforeUpdate：数据变了 视图还没变
updated：数据变了 视图也变了
销毁阶段
beforeDestory：组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
destoryed：组件销毁之后
除了这八个 还有 三个
如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数
1.2 项目开发中 在生命周期里都做过什么功能
我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求
created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
mounted 的特点是可以操作 dom 节点
还会用 created 钩子函数 获取 本地存储的数据
1.3 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?
自己试一试 把顺序写一下
页面—beforeCreate
页面—created
页面—beforeMoun
组件—beforeCreate
组件—created
组件—beforeMount
组件—mounted
页面—mounted
# 2.vuex 的理解
vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用
一共有五大核心
state 存放公共数据的地方 通过 this.$store.state.xxx调用
mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用
getters 相当于是之前的计算属性 通过 this.$store.getters 调用
actions 执行异步操作的地方 通过 this.$store.dispatch 调用
modules 模块化
vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储
vuex 的执行机制
我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions
⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制
3. vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解
⾯试官您好,接下来我给您介绍⼀下vue的路由模式,vue的路由模式⼀共有两种,分别是hash和history. 他们的区别是hash模式不
会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会
报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.
history的原理就是利⽤html5新增的两个特性⽅法,分别是pushState和replaceState来完成的. 以上就是我对vue路由模式的理解.
4. vue路由守卫?(必问) 讲解⻚⾯权限
⾯试官您好,接下来我给您介绍⼀下vue路由守卫,⾸先呢,所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,
我们把它称之为vue路由守卫. vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由
独享守卫,这个是写在路由⾥⾯. 不管是全局,还是组件以及独享,都会有beforeEach、beforeResolve 、afterEach 分别表示的意
思路由跳转前会触发的钩⼦函数以及进⼊路由的时候,以及进⼊路由之后会触发的钩⼦函数. 这⼏个钩⼦函数⾥⾯都有⼀个回
调函数,这个回调函数⾥⾯会有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,以及进⼊写⼀个路由
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex
和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要
跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚
以上就是我对vue路由守卫的理解
5. vue组件通信?(必问)。eventBus 讲解
⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进
⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值
⼦传⽗ ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来
接收传递的数据
⾮⽗⼦组件通信
通过中央事件总线,我们也称之为eventBus,
我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接
收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式
6. vue双向数据绑定原理?(必问) 过⼀下
vue.js 则是采⽤ 数据劫持 结合 发布者-订阅者 模式的⽅式，
通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，
在数据变动时发布消息给订阅者，触发相应的监听回调。
这个时候就可以实现数据的双向绑定
7.vue中key的作⽤是什么?(必问)。过⼀下
避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下标.
8 说⼀下vue中本地跨域如何解决?线上跨域如何解决?(必问) 线上在讲解⼀下
本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称 代理
地址 开启跨域 重写路径
线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址
9. vue中data发⽣变化,视图不更新如何解决?(必问) 过⼀下
⾯试官,您好,接下来我先给您介绍⼀下为什么data发⽣变化,视图不更新,因为Vue实例中的数据是响应式的**⽽我们新增的属
性并不是响应式的，由于受现在JavaScript的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。
**
所以我在项⽬中遇到这类问题的时候⼀般是通过this. 方法去解决 $set⽅法⼀共有三个参数,分别是⽬前属性,新增属性,
新增的值.
以上就是我对视图不更新的理解.
10. 为什么vue中data必须是⼀个函数?(必问) 过⼀下
如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空
间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全
都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关
