vue2面试题补充

---

---

1. 路由导航守卫扩展

导航守卫一共有三种
全局的守卫 守卫所有的页面
beforeEach 路由前置守卫
beforeResolve 路由解析之前
afterEach 路由离开

全局守卫 beforeEach 和 beforeResolve
他们两个都会在路由跳转前就执行 参数都是 to from next
他们两个的区别 执行的时机不一样 beforeEach 是在路由规则被循环之前执行
beforResolve 是在组件被解析之后调用 beforeEach 要比 beforResolve 先执行

组件守卫 守卫单个组件
beforeRouteEnter 路由进入
beforeRouteUpdate 路由更新
beforeRouteLeave 路由离开

独享守卫 守卫单个页面
beforeEnter 路由进入之前

三种守卫全局 组件 独享守卫的区别：

1. 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面
2. 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里
3. 执行顺序有区别 执行的顺序：
   beforeEach 前置守卫
   beforeEnter 独享守卫
   beforeRouteEnter 组件守卫
   beforeResolve 解析守卫
   afterEach 路由后置守卫

2.组件传值的八种方式

1. 父传子

• 首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受
  在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）

2. 子传父

首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了

3. 兄弟组件

• 利用中央事件总线 eventbus
  在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus传数据的时候用this.$bus.$emit传在要接受数据的子组件在created钩子函数中用$on 方法接收

4. 利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了

5. 其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信

6. $attr+$listener
   如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
   在 B 组件中给 C 组件绑定 v-bind=“$attrs"v-on="$listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
   （简单来说：$attrs与$listeners 是两个对象，$attrs里存放的是父组件中绑定的非Props属性，$listeners 里存放的是父组件中绑定的非原生事件。）

7. provide 和 inject
   父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量，不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据
   这种写法传的数据是不响应的

8. $parent和$children
   在子组件内可以直接通过$parent对父组件进行操作，在父组件内可以直接通过$children 对子组件进行操作
   在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件

9. 也能用本地存储 来 完成组件通信

3.多环境变量

一般分为开发环境和生产环境

development 开发
production 生产（上线）
怎么配置多环境变量
首先建立两个文件 在根目录
.env.dev
里面写上 NODE_ENV=“development”
.env.prod
里面写上 NODE_ENV=“production”

这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境
比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL
在开发的时候使用测试接口
在上线的时候使用真实接口

npm run serve 开启的就是开发环境
npm run build 开启的就是生产环境