# 面试题一

# 1.vue-router 的动态路由匹配以及使用

--在router目录下的index.js文件中，对path属性加上/:id。
--使用router对象的params.id

# 2.router-link 组件及其属性

router-link 组件支持用户在具体有路由功能的应用中（点击）导航。属性（props）

to 通过 to 属性指定目标地址。

<router-link :to="home">Home</router-link>
<router-link :to="{ path:'home'}">Home</router-link>
//命名路由
<router-link :to="{ name: 'user', params: {userId: 123} }">Home</router-link>
//带查询参数，下面的结果为/register?plan=private-->
<router-link :to="{ path: 'register', query: {plan: 'private'}}"
  >Register</router-link
>

replace 调用 router.replace()导航后不会留下 history 记录也就是不能回退到上一个页面

<router-link :to="{path: '/abc'}" replace>ABC</router-link>

append 在当前路径前添加基路径，例如，我们从/a 导航到一个相对路径 b，如果没有配置 append，则路径为/b，如果配了，则为/a/b

<router-link to="b" append>Home</router-link>

tag 转化为我们想要的任意标签同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">FOO</router-link>
// 渲染结果
<li>FOO</li>

active-class 设置链接激活时使用的 css 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置, 默认值为

‘router-link-active‘
        export default New Router({
                linkActiveClass: ‘active‘
        })

6.exact 精准匹配链接激活时使用的 css 类名默认值可以通过路由的构造选项 linkExactActiveClass 来全局配置,

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact></router-link>

# 3.router 懒加载

    {
      path: '/vantlist',
      name: 'vantlist',
      component: () => import('./views/VantList.vue'),
    },

# 4.vue-router 两种模式区别及使用注意事项

hash vue-router 默认的是 hash 模式—使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变的时候,页面不会重新加载,也就是单页应用了,当#后面的 hash 发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发 hasChange 这个事件,通过监听 hash 值的变化来实现更新页面部分内容的操作

history 主要使用 HTML5 的 pushState()和 replaceState()这两个 api 来实现的,pushState()可以改变 url 地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL)

# 5.token

Token 的引入：Token 是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token 便应运而生。
2、Token 的定义：Token 是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个 Token 便将此 Token 返回给客户端，以后客户端只需带上这个 Token 前来请求数据即可，无需再次带上用户名和密码。
3、使用 Token 的目的：Token 的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

# 6.vuex 是什么？什么是单向数据流

Vuex 是 vue 框架中状态管理。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
单向数据流指只能从一个方向来修改状态。

# 7.使用 vuex 的核心概念

State:提供一个响应式数据； Getter:借助 Vue 的计算属性 computed 来实现缓存； Mutation；更改 state 方法； Action:触发 mutation 方法； Module:Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

# 8.如何在组件中去使用 vuex 的值和方法？

直接获取、修改：

//state
this.$store.state.count;
//getter
this.$store.getters.count;
//调用 action 修改 state 值，不带参数
this.$store.dispatch('increment');
//调用 action 修改 state 值，带参数
this.$store.dispatch('increment', { value: 123 });

通过 map 辅助函数获取、修改 vuex：

/**
 *  vuex提供了三种辅助函数用于获取、修改vuex：
 *  mapState、mapGetters、mapActions
 *  即将vuex的变量或者方法映射到vue组件this指针上。
 */

# 9.在 vuex 中使用异步

在调用 vuex 中的方法 action 的时候，用 promise 实现异步修改

const actions = {
  asyncInCrement({ commit }, n) {
    return new Promise(resolve => {
      setTimeout(() => {
        commit(types.TEST_INCREMENT, n);
        resolve();
      }, 3000);
    });
  }
};

# 10.请说出 vue 常用指令

v-for 循环渲染列表
v-bind:动态绑定属性 v-on:绑定事件
v-model:双向数据绑定（多用于表单）
v-if/v-show:控制元素的显示与隐藏

# 11.vue 常用的修饰符

修饰符

事件修饰符

.stop:阻止事件冒泡 .prevent:阻止默认行为
.self:只有事件在元素本身时触发回调 .once:只触发一次

键盘修饰符

.enter .tab .delete (捕获“删除”和“退格”键)
.esc .space .up .down .left .right

# 12.watch methods 和 computed 区别

watch:为了监听某个响应数据的变化应用场景：值改变执行逻辑
computed:自动监听依赖值的变化可以缓存值简化模板内复杂运算应用场景:只需要动态值
method:方法体可以接受参数

# 13.route 与 router 的区别

1.route 是路由信息对象包含属性配置项 path params hash query fullPath name children

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    {
      path: '/foo',
      component: Foo,
      children: [
        // 这也是个路由记录
        { path: 'bar', component: Bar }
      ]
    }
  ]
});

2.路由实例对象一般调用实例方法 (包括钩子函数)

this.$router.push(location, onComplete?, onAbort?)
this.$router.push(location).then(onComplete).catch(onAbort)
this.$router.replace(location, onComplete?, onAbort?)
this.$router.replace(location).then(onComplete).catch(onAbort)
this.$router.go(n)
this.$router.back()
this.$router.forward()

# 14. 路由的跳转方式？vue-router 守卫(卫士)

1.声明式跳转 (标签式跳转) 导航式跳转(js 跳转) 2.router.beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

# 15.vuex有哪几种属性(核心概念)

State Action Mutation Getter Module

# 16.组件中的data为什么是一个函数

因为对象是一个引用数据类型，如果data是一个对象的情况下会造成所有组件共用一个data。而当data是一个函数的情况下，每次函数执行完毕后都会返回一个新的对象，这样的话每个组件都会维护一份独立的对象(data)

# 17.组件之间的传值方式 (父子组件之间跨级组件之间兄弟组件之间)

props/$emit 父组件向子组件传值 props 子组件向父组件传值 $emit
$emit/$on 这种方法是通过一个空的vue实例作为事件中心用它来触发事件和监听事件，巧妙而轻量地实现任何组件间的通信
vuex 单向数据流只能通过一种方式改变数据状态
$attrs/$listeners $attrs/$listeners是两个对象，$attrs里存放的是父组件中绑定的非props属性 $listeners里存放的是父组件绑定的非原生事件
$ref $parent与$children 子组件或元素中定义ref属性 ref代表这个子组件或标签通过$ref可获取

# 18.父子组件生命周期问题

beforeCreate、created、beforeMounted是按顺序执行，由外到内；而mounted即最终的挂载阶段则是由内到外，先将子组件挂载到dom上，然后再是父组件
原因:既然组件之间存在父子关系，即父嵌套子，那么子组件就相当于父组件的一部分，那肯定要先将其一部分先挂载到dom上，然后再将整个父组件挂载上去。
总结:父子组件嵌套的生命周期其实都是先父后子然后先子后父。后续再加入update和destroy的相关代码

← 实战 2 面试题二 →