Vue常见面试题---持续更新

Vue常见面试题 — 答案仅供参考，非标准—持续更新

Vue面试题

生命周期函数面试题

1. 什么是 vue 生命周期
  答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
  总的来说，vue生命周期就是指vue实例从创建到销毁的过程。
2. vue生命周期的作用是什么
  答：在这个过程中也会运行一些叫做生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
3. 第一次页面加载会触发哪几个钩子
  答：beforeCreate、created、beforeMount、mounted
4. 简述每个周期具体适合哪些场景
  答：beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
  created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
  beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
  mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
  beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
  updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
  beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
  destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
5. created和mounted的区别
  答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
6. vue获取数据在哪个周期函数
  答：一般 created/beforeMount/mounted 皆可.比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
7. 请详细说下你对vue生命周期的理解？
  答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后：
  beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。
  created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：
  beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
  mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：
当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
vue路由面试题

1. mvvm 框架是什么？
  vue是实现了双向数据绑定的mvvm框架，当view改变更新model层，当model层改变更新view层。在vue中，使用了双向数据绑定技术，就是view的变化能实时让model发生改变，而model的改变也能实时更新view。
2. vue-router 是什么?它有哪些组件
  它是vue用来写路由的一个插件，它有router-link、router-view组件。
3. active-class 是哪个组件的属性？
  vue-router 模块的 router-link 组件的属性，用来做选中样式的切换；可以在路由js文件的linkActiveClass属性中修改

//css
.active {
  color: pink;
}
//end css

//js
export default new Router({
	linkActiveClass: 'active';
	routes:[];
})
//end js

4. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
  动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头。

{
    path: '/user/:id'
    component: User
}

然后在 router-link中的to属性绑定id

    <div class="content" v-for="item in list" :key="item.id">
        <router-link :to="'/home/newsinfo/' + item.id"></router-link>
    </div>

5. vue-router 有哪几种导航钩子?
  答：三种，
  第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

const router = new VueRouter({
	routes:[
		{
			path: '/foo',
			component: () => import('./Foo.vue')
		}
	]
})
router.beforeEach((to, from, next) => {
	//to, 要跳转到哪个路由地址
	console.log(to);
	//from, 跳转之前的那个路由地址
	console.log(from);
	//next, 这是一个方法。
	console.log(next);
	//当使用了 路由全局守卫，next() 是必需的，不写里面的代码将不执行，
	//next()可接收一个参数，这个参数可以说是布尔类型也可以是路由地址.
	//next()，这样写，默认参数为true，也就是允许跳转
	if (to.name !== 'Login') next({ name: 'Login' })
  	else next()
	//next(false)，这样写，参数为false，不允许跳转
	//next('/login')，当参数为路由地址时，重新定向到某个页面，
	//也可以写成next({path: '/login'})
	next();
})

  第二种：组件内的钩子—里面的参数用法一样，写在当前组件，只有进入当前组件才会触发

const Foo = {
  template: `<div>This is FOO component</div>`,
  beforeRouterEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRoputerUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouterLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

  第三种：单独路由独享组件—里面的参数用法一样，写在路由内部，只有进入当前路由才会触发

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

点击查看官方使用方法
6. route和router 的区别
  答：$route是跳转之后的路由对象，可以获取该路由的id， name等一些属性。
  $router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
7. vue-router响应路由参数的变化
8. vue-router传参
  vue-router传参主要分为两种，字符串和对象。
9. vue-router的两种模式
hash模式和history模式，可参考这位博主发的https://blog.youkuaiyun.com/E_li_na/article/details/80212724

10. vue-router实现路由懒加载（ 动态加载路由 ）

//定义懒加载
const Foo = () => import('./Foo.vue')

//和往常一样正常使用
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

也可以直接使用

const router = new VueRouter({
	routes:[
		{
			path: '/foo',
			component: () => import('./Foo.vue')
		}
	]
})

具体的说明官方解释的很详细https://router.vuejs.org/zh/guide/advanced/lazy-loading.html