前端面试题三（vue篇）

1.说说Vue组件间通讯方式

通讯种类

1. 父组件向子组件通讯
2. 子组件向父组件通讯 blog.csdn.net/qq_37570945…
3. 隔代组件间通讯
4. 兄弟组件间通讯

实现通讯方式

(一). props

1. 经过通常 标签 属性实现父向子通讯
2. 经过 *** 函数 *** 属性实现子向父通讯
3. 缺点： 隔代组件和兄弟组件通讯比较麻烦

• 隔代组件得逐层传递
• 兄弟组件得借助父组件

(二). vue自定义事件

1. vue内置实现，能够代替函数类型的props

• 1). 绑定监听：<MyComp @eventName="callback"
• 2). 触发(分发)事件： this.$emit('eventName',data)

在父组件写入子组件标签时，给它绑定自定义监听，给它指定回调函数，在子组件中分发事件，vue提供了$emit('指定时间名'，数据)，这时候数据就会从子组件传递给父组件
复制代码

2. 缺点： 只适合子向父通讯

(三). 消息订阅与发布

1. 须要引入消息订阅与发布的实现库，如：pubsub-js

• 1). 订阅消息： PubSub.subscribe('msg',(msg,data)=>{})
• 2). 发布消息：PubSub.publish('msg',data)

2. 优势： 此方式可用于任意关系组件间的通讯

(四). vuex

1. 是什么： vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2. 优势： 对组件间关系没有限制，且相比于pubsub库管理更集中，更方便

(五). slot

1. 是什么：专门用来实现父向子传递带数据的标签

• 1). 子组件
• 2). 父组件

2. 注意：通讯的标签模板是在父组件中解析好再传递给子组件的

2.关于vue

1. vue是由饿了么ued团队开发并维护的一个渐进式js框架
2. vue是一个mvvm的框架

3.如何使用vue去构建项目

1. 使用vue-cli脚手架工具构建项目
2. 也能够直接引入vue.js进行项目的构建

4.Vue生命周期函数

vue生命周期分为四个阶段:

1. 组件建立时（creating）
2. 模板渲染时（mounting）
3. 数据更新时（updating）
4. 组件卸载时（destroying）

vue生命周期完整过程：

5.Vuex 管理状态的机制

1. 对Vuex基本理解

• 1). 是什么：Vuex是一个专为Vue.js应用程序开发的状态管理的vue插件
• 2). 做用：集中式管理vue多个共享的状态和后台获取数据,主要是为了解决组件间状态共享的问题，强调的是集中式管理，主要便于维护，便于解耦，因此不是全部的项目都适合使用vuex。

2. Vuex的工做原理

6.说出4个vue当中的指令和它的用法

1. v-if 条件渲染指令，表明存在销毁
2. v-bind 绑定指令，用来绑定属性（简写方式是：）
3. v-on 监听事情指令（简写是@）
4. v-for 循环指令

7.导航钩子有哪些？他们有哪些参数？

1. 导航钩子其实就是路由的生命周期（vue-router）
2. 主要分为 全局 和 局部
3. 全局钩子函数

• 1). beforeEach: 路由切换开始调用
• 2). afterEach: 在路由切换离开时调用

4. 局部到单个路由

• 1). beforeEnter

5. 组件的钩子函数

• 1). beforeRouterEnter
• 2). beforeRouterUpdate
• 3). beforeRouterLeave

6. 参数

• 1). to:即将进入的目标对象
• 2). from:当前导航要离开对象
• 3). next: 是一个函数 调用 resolve 执行一下

8.v-model是什么？Vue中标签怎么绑定事件？

1. vue中利用v-model来进行表单数据的双向绑定
2. v-bind 绑定一个value的属性
3. 利用v-on 把当前的元素绑定到一个事件上

<div id="demo">
    <input v-model="inputValue" />
    <p>{{inputValue}}</p>
    
    <input v-bind:value="inputValue2" v-on:input="inputValue2 = $event.target.value" />
</div>
<script>
    var vm = new Vue({
        el:"#demo",
        data:{
            inputValue:'',
            inputValue2:''
        }
    })
</script>
复制代码

9.路由懒加载

理解：路由懒加载 也叫延迟加载，即在你须要的时候加载

如何使用：使用到了vue中的异步组件，配合webpack的代码分离，只须要本身返回一个permise函数，resolve中只包含你想要用的那个xxx.vue文件就能够了。

//在router文件的index.js中进行懒加载
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

function resolveView(view){
    return ()=> import(/*webpack chunk name*/`@/components/${view}.vue`)
}

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component: resolveView('HelloWorld')
        },
        {
            path:'/detail',
            name:'Detail',
            component: resolveView('Detail')
        },
    ]
})
复制代码

10.Vue-loader 解释一下

(一).什么是vue-loader?

• vue-loader 就是一个加载器，能把.vue组件转化成Javascript模块

(二).为何咱们要转译这个vue组件

• 能够动态的渲染一些数据
• 对三个标签都作了优化，script中能够直接使用es6 style 也默承认以使用sass,而且 还提供了做用域的选择
• 另外开发阶段，还提供了热加载

11.用过插槽码？用的具名插槽仍是匿名插槽呢？

含义：

1. vue中的插槽 是一个很是好用的东西，slot 说白了就是一个占位
2. 在vue当中 插槽包含三种 一种是默认插槽（匿名插槽），一种是具名插槽，一种是做用域插槽

• 1). 匿名插槽 ：就是没有名字的，只要默认的 都填到这里
• 2). 具名插槽 ：指的是具备名字的
• 3). 做用域插槽 ： 指只做用域当前的slot

举例：

//子组件about.vue
<template>
    <div>
        <h2>关于插槽</h2>
        <slot name="header"></slot>                 /*具名插槽*/
        <slot></slot>                               /*匿名插槽*/
        <slot name="footer" say="hello"></slot>     /*say='hello'传递的参数*/
    </div>
</template>
<script>
    export default {
        name:'about'
    }
</script>

复制代码

//父组件：helloWorld.vue
<template>
    <div>
        <About>
            <h2>这是HelloWorld组件的内容</h2>
            <div slot="footer" slot-scope="aaa">
                {{aaa}}这是底部
            </div>
            <div></div>
            <div slot="header" slot-scope="aaa">
                {{aaa}}这是头部
            </div>
        </About>
    </div>
</template>
<script>
import About from '@/componts/About';
export defalut {
    name:'HelloWorld',
    components：{
        About
    }
}
</script>

复制代码

• 打印结果：

12.说说你对vue虚拟DOM的理解

(一).什么是虚拟dom

• 说白了 就是以js对象的形式 去添加dom元素
• 本质上是优化了diff算法
• 采用了 新旧dom的对比 获取你差别的dom，一次性更新到 你真实的dom上
• 虚拟dom自己也有本身的缺陷，他更适合批量修改dom
• 尽可能不要跨层级修改dom
• 设置key 能够最大的利用节点

13.如何理解Vue的MVVM模式

(一). mvvm 和 mvc 之间的区别

1. mvc 指的是model view controller
2. mvvm指的是model view viewModel
3. 而vue专一于view 和 viewModel 的框架

(二). mvc流程

• 用户输入数据(view) =>给到控制器(controller)=>控制器判断能够把数去传递给model => model传递完数据会再给到view
• 有时候用户把数据(view)传递给控制期(controller),controller会判断 这个数据不须要通过数据库请求，就能够把数据直接返回给view
• view 不须要业务处理，只须要数据请求，view 也能够直接像model请求

(三). mvvm流程

14.Vue中keep-alive的做用

(一).什么是keep-alive

• 说白了 它能让不活动的组件 "活着"
• 它提供了 include 和 exclude 两个属性 容许组件有条件的缓存

(二).实现的原理

• 其实就是在created的时候将须要的缓存的vnode节点 放到 cache 中，在render的时候 根据name进行取出

(三).怎么使用它

• 在路由的meta中添加 keepAlive 属性
• 跟 router-view 配合使用的

// router/index.js
export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:resolveView('HelloWorld'),
            meta:{
                keepAlive:true
            }
        }
    ]
})
复制代码

// App.vue
<template>
    <div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </div>
</template>
复制代码

• $route.meta.keepAlive 根据页面的不一样状况来缓存