2020前端VUE面试题

@VUE面试题

VUE面试题

第一章 VUE基础

1. vue的优点 ，

2. 1、轻量级框架 只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
   2、简单易学 国人开发,中文文档,不存在语言障碍,易于理解和学习
   3、双向数据绑定 也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
   也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
   这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
   4、组件化
   在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
   Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
   5、视图,数据,结构分离
   使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
   6、虚拟DOM
   现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
   而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
   7、运行速度更快
   像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

二. vue父组件向子组件传递数据

父传子主要通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收

 <div id="container">父组件
        <Child :msg="data"></Child>
    </div>
     <div id="container">子组件
        <h1>{{msg}}</h1>
    </div>

父组件触发子组件的方法，主要通过$refs来触发，同时传参

<template>
    <div id="container">
　　　　<h1 @click="getData">点击将触发子组件方法，并把参数传给子组件</h1>
    　　<child ref="mychild"></child>
    </div>
</template>
methods: {
　　getData(){
　　　　//触发子组件方法，并传参
        this.$refs.mychild.init("chrchr","120");
　　} 
  },
<template> //子组件
    <div id="container">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
</template>
export default {

  props:["msg"],
  
  data() {
    return {
        name: '',
        age： ''
    };
  },
  mounted:{   
  },  
  method:{
    //父组件触发子组件的init方法
    init(name,age){
        this.name = name;
        this.age = age;
    }
  }
};

三. 子组件向父组件传递事件

1.子组件需要使用this.$emit 将子组件的事件进行上级传递。
2. 父组件需要使用@事件名的方式，接收子组件的事件。

  this.$emit('clickHeadAction',this.titleRight);子组件
   <ActivityHead  :titleRight="msgRight" @clickHeadAction="clickChild"></ActivityHead>父组件

四,v-show和v-if的共同点和不同点

v-if 是’真正‘的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

五.如何让css只在当前组件起作用?

在组件中的style前面加上scoped就可以了

七 如何获取dom

直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式

使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空，如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值。
如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值，vue会报错：
vue中操作dom需要谨慎，尤其是添加或删除dom的时候，特别是mounted()和created()的时候，此时dom对象还没有生成，要放在this.nextTick()的回调函数中。

八 说出几种vue的指令和他的用法

v-once: 只绑定一次
v-bind: 绑定数据
v-model: 绑定模型
v-on: 绑定事件
v-model 双向数据绑定
v-html 获取html标签 v-text不解释标签，v-html解释标签
v-if v-show: 条件渲染

九 vue-loader是什么? 使用它的用途有哪些?

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
二、用途 : js可以写es6,style样式可以写scss或less、template可以加jade等
三、css-loader：加载由vue-loader提取出的CSS代码
vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码

十 为什么使用key

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度
key具有唯一性
vue中循环需加 :key=“唯一标识” ，唯一标识可以使item里面id index 等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM
不带有key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff速度来看也是不带key更加快速的，因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。但是这个并不是key作用，而是没有key的情况下可以对节点就地复用，提高性能。这种模式会带来一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据（表单）状态，会出现状态错位。VUE文档也说明了。还有就是key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，但是这个含有争议。

十一 axios及安装?

npm install axios

十二 v-modal的使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖
v-model指令的本质是： 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。 然后当输入事件发生时，实时更新vue实例中的数据。

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>

十三. 说出vue.cli项目的src目录每个文件夹和文件的用法

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

十四 简述computed和watch的使用场景

1.methods里面定义的是函数，你显然需要像”fuc()”这样去调用它（假设函数为fuc）
2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,
3.watch:类似于监听机制+事件机制：
首先它们都是以Vue的依赖追踪机制为基础的，它们的共同点是：都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化
我们当然可以自己写代码完成这一切，但却很可能造成写法混乱，代码冗余的情况。Vue为我们提供了这样一个方便的接口，统一规则
但watch和computed也有明显不同的地方：
watch和computed各自处理的数据关系场景不同
1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响
watch擅长处理的场景：一个数据影响多个数据
注意
不要在 computed 或 watch 中，去修改所依赖的数据的值，尤其是 computed；如果这样做，可能导致一个无线循环的触发。

十五 v-on可以监听多个方法吗?

<input
     type="text"
     v-on="{
     input:onInput,
     focus:onFocus,
     blur:onBlur,
     }"
>

十六 $nextTick的使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；

 <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    
export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
    //结果 111 undefined 333 <div>  222 <div>   444<div

可以根据打印的顺序看到，在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

十七 vue组件中的data为什么必须是一个函数

，如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。
js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

十八 渐进式框架的理解

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件
在核心库的基础上，vue现在已经有了一套完整的生态系统，我们可以添加Vuex，可以添加vue-router,可以添加任何你想添加的第三方库，这些都是互相独立的。
所以我们也可以说vue是轻量型的，是渐进型的，

十九 vue中双向数据绑定是如何实现的

1. vue数据双向绑定的原理。
   实现简单版vue的过程，主要实现{{}}、v-model和事件指令的功能。
   实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
   1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
   2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
   3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
   4、mvvm入口函数，整合以上三者
   

二十 单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2，前后端分离
3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

二十一 v-if和v-for的优先级

v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
先根据条件过滤然后在渲染

 activeUsers: function () {
        return this.users.filter(function (user) {
          return user.isActive
        })
    }

二十二 assets和static的区别

1、相同点： 文件夹中的资源在html中使用都是可以的。
2、不同点：static :该目录下的文件是不会被wabpack处理的，它们会被直接复制到最终的打包目录下面（默认是 dist/static ），且必须使用绝对路径来引用这些文件。
这是通过在 config.js 文件中的 build.assetsPublicPath 和 uild.assetsSubDirectory 链接来确定的
注意：任何放在 static 中的文件需要以绝对路径的形式引用：/static/[filename]
assets 中的文件会经过 webpack 打包，重新编

二十三 vue常用的修饰符

 <input type="text" v-model.lazy="value"/>
 <div @click.self="openMask">

一、v-model修饰符
1、.lazy：输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：
2、.trim：输入框过滤首尾的空格：
3、.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：
二、事件修饰符
4、.stop：
阻止事件冒泡，相当于调用了event.stopPropagation()方法：
5、.prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
6、.self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：
7、.once：事件只能用一次，无论点击几次，执行一次之后都不会再执行
8、.capture：事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
9、.sync对prop进行双向绑定
10、.keyCode：监听按键的指令，具体可以查看vue的键码对应表

二十四 vue的两个核心点

1、数据驱动，也叫双向数据绑定。
Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
2、组件系统。
vue组件的核心选项:
（1）模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
（2）初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
（3）接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
（4）方法（methods）：对数据的改动操作一般都在组件的方法内进行。
（5）生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。
（6）私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

二十五 vue和jquery的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
jquery操作数据更加复杂麻烦

二十六 引进组件的步骤

1.在components组件库中添加新组件a.vue
2.在父类组件导入组件a import A from"xxxx/components/a"
3.注册组件 在export default { components:{a},data():{}}
4在渲染的<'template><'a/></'template>使用

二十七 delete和vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。长度不变
splice直接删除了数组 改变了数组的键值。
Vue.delete直接删除了数组 改变了数组的键值。长度改变

二十八 SPA首屏加载慢如何解决

1.将公用的js库用script引入，让浏览器并行下载资源
2.配置路由，组件，页面。使用懒加载，在调用某个组件时在下载 某个js
3.加一个首屏的loading图，可以提高用户体验
1、安装动态懒加载所需插件
babel-plugin-syntax-dynamic-import
配置/laravel/.babelrc
压缩

二十九 vue-router跳转和location.herf有什么区别

①vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次
②vue-router使用diff算法，实现按需加载，减少dom操作
③vue-router是路由跳转或同一个页面跳转；location.href是不同页面间跳转；
④vue-router是异步加载this.$nextTick(()=>{获取url})；location.href是同步加载
//页面跳转后获取携带参数applicationNo参数

三十 vue slot

在子组件内使用特殊的<'slot>元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容.示例代码如下:

<body>
    <div id="app">
        <child-component>
            <p>分发的内容</p>
            <p>更多分发的内容</p>
        </child-component>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('child-component', {
            template: '\
            <div>\
                <slot>\
                    <p>如果父组件没用插入内容,我将作为默认出现</p>\
                </slot>\
            </div>'
        });
        var app = new Vue({
            el: '#app'
        })
    </script>
</body>

子组件 child-component 的模板内定义一个 元素,并且用一个

作为默认的内容,在父组件没有使用 slot 时,会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 .所以上列渲染后的结果为:

<div id="app">
     <div>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </div>
</div>

注意:子组件内的备用内容,它的作用域时子组件本身.
具名 Slot 给 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:

<body>
    <div id="app">
        <child-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多正文内容</p>
            <div slot="footer">底部信息</div>
        </child-component>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('child-component', {
            template: '\
            <div class="component">\
                <div class="header">\
                    <slot name="header"></slot>\
                </div>\
                <div class="main">\
                    <slot></slot>\
                </div>\
                <div class="footer">\
                    <slot name="footer"></slot>\
                </div>\
            </div>'
        });
        var app = new Vue({
            el: '#app'
        })
    </script>
</body>

子组件内声明了3个 元素,其中在

内的 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.
如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.
上例最终渲染后的结果为:

<div id="app">
        <div class="container">
            <div class="header">
                <h2>标题</h2>
            </div>
            <div class="main">
                <p>正文内容</p>
                <p>更多的正文内容</p>
            </div>
            <div class="footer">
                <div>底部信息</div>
            </div>
        </div>
    </div>

三十一 你们vue项目是打包一个js文件,一个css文件还是多个文件/

一般都是按需加载，打包也是根据需要进行打包。
推荐你一个插件webpack-bundle-analyzer
它能显示每个打包文件打包了哪些内容，占比都是多少，可以有利于优化

三十二 vue里面router-link在电脑上用,在安卓上没反应怎么解决

，babel问题，安装babel polypill插件解决。 框架底层

三十三 vue2中注册在router-link上事件无效解决方法

   <router-link @click="change"><span>{{item.text}}</span></router-link>

事件被阻止
如果当前router-link的tag不是a的话（官方文档中说明：默认为a，可以通过tag改变渲染后的标签），那么就会往自己的子元素（组件）找，找到的第一个就会把一些属性及时间覆盖过去。
所以此时事件是被阻止了。个人看法：因为router-link的作用是单纯的路由跳转，如果不阻止事件的话，也许会有很多坑，所以作者干脆阻止了其他事件的触发

<router-link  @click.native="change"><span>{{item.text}}</span></router-link>

如何解决 只需要在@click后面加上native就可以了
添加native事件修饰符之后变为原生事件 $element.addEventListener(click, callback);
此时a标签并不会阻止，至此便可以解决绑定在router-link身上的事件不会触发的问题。
其次，想要实现tab切换添加class可以在router中添加如下配置：

export default new Router({
  routes: [],// 路由跳转配置
  linkActiveClass:'active' // 在路由中添加配置  active 为跳转到该路由时添加的激活类名
})

三十四 routerLink在IE和Firefox中不起作用(路由不跳转)的问题

方案一 不可取 将 clrDropdownItem 样式放在</'a>标签，不使用<\button>标签
方案二 用 click转换成 router =>this.$router.push({ name: ‘Login’ })

三十五 axios的特点有哪些

ajax缺点:
基于原生的XHR开发，XHR本身的架构不清晰
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱，而且基于事件的异步模型不友好
axios优点：
从浏览器中创建 XMLHttpRequest
支持 Promise API
从 node.js 创建 http 请求
转换请求和响应数据
自动转换JSON数据

三十六 请说下封装vue组件的过程

● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

三十七 params和query的区别

传参可以使用params和query两种方式。
使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
使用query传参使用path来引入路由。
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。

三十八 vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的，从网上搜了下，有博主给出的解决方案是，在css里加上：
我试了一下，还是没有彻底的解决问题，页面加载之前，仍然会有短暂的花屏现象，摸索好久，终于找出一个解决方案，就是在我的根dom上加上 style=“display: none;” :style="{display: ‘block’}"
[v-cloak] { display: none; }

<div class="app" style="display: none;" :style="{display: 'block'}">
	{{message}}
</div>

三十九 vue更新数组时触发视图更新的方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
filter(), concat()和 slice()

四十 vue常用的UI组件库

element
.MintUI
Vux

四十一vue修订打包后静态资源路径的修改

打开config/index.js，将其中的assetsPublicPath值改为’./’

第二章 生命周期函数面试题

四十二 什么是vue的生命周期?有什么作用?

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行

四十三 第一次页面加载会触发那几个钩子?

beforeCreate， created， beforeMount， mounted

四十四 简述每个周期具体适合那些场景

2.vue生命周期的8个阶段？
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
beforeCreate 创建之前：已经完成了 初始化事件和生命周期
created 创建完成：已经完成了 初始化注册和响应
beforeMount 挂载之前：已经完成了模板渲染
mounted :挂载之后：已完成HTML虚拟化，创建了el节点 可以操作DOM了
beforeDestroy ：摧毁之前：整个vue都处在实时监控空渲染和更新
destroyed: 已摧毁，已经摧毁了观察者，子元素和事件监听

四十五 reacted和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
如：数据初始化一般放到created里面，这样可以及早发请求获取数据，
如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

四十六 vue获取数据在哪个周期函数

created和mounted也差不多
当然也可以放在updated中

四十七 请详细说下你对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路由面试题

四十八 mvvm框架是什么?

简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

四十九 vue-router是什么?它有哪些组件

vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换）

<router-link :to='' class='active-class'>   //路由声明式跳转 ，active-class是标签被点击时的样式
<router-view>                  //渲染路由的容器
<keep-alive>                    //缓存组件

五十 active-class 是那个组件的属性/

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；当routerlink标签被点击时将会应用这个样式；

五十一 怎么定义vue-router的动态路由? 怎么获取存过来的值?

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

五十二 vue-router有哪几种导航钩子

1、全局守卫： router.beforeEach
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
导航表示路由正在发生改变，vue-router 提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
注意：参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过 观察\ $route 对象 来应对这些变化，或使用 beforeRouteUpdate的组件内守卫。
详情

五十三 $route’和’$router’的区别

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})
//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

五十四 vue-router的两种模式

1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容
优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力,
缺点: 不利于SEO,初次加载耗时比较多
2、hash模式
vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作
对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由
3、history模式
主要使用HTML5的pushState()和replaceState()这两个api来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
包括back,forward , go 三个方法
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
区别：
前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

五十五 vue-router实现路由懒加载(动态加载路由)

1.vue异步组件
2.es提案的import()
3.webpack的require,ensure()

2.组件懒加载方案二 路由懒加载(使用import)
const 组件名=() => import(‘组件路径’);
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import(’@/components/home’)
const Index = () => import(’@/components/index’)
const About = () => import(’@/components/about’) /
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
把组件按组分块
const Home = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/home’)
const Index = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/index’)
const About = () => import(/ webpackChunkName: ‘ImportFuncDemo’ / ‘@/components/about’)
{ path: ‘/about’, component: About }, { path: ‘/index’, component: Index }, { path: ‘/home’, component: Home }
3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
/ 组件懒加载方案三: webpack提供的require.ensure() */
{ path: ‘/home’, name: ‘home’, component: r => require.ensure([], () => r(require(’@/components/home’)), ‘demo’) },
{ path: ‘/index’, name: ‘Index’, component: r => require.ensure([], () => r(require(’@/components/index’)), ‘demo’) },
{ path: ‘/about’, name: ‘about’, component: r => require.ensure([], () => r(require(’@/components/about’)), ‘demo-01’) }

第四章 vuex常见面试题

五十六 vuex是什么?怎么使用,那种功能场景使用它

Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

五十七 vuex有哪几种属性?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单点说，方便父子组件及组件之间的数据传递。
有 5 种，分别是 state、getter、mutation、action、module
vuex 的 store 是什么？
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性。
vuex 的 getter 是什么？
getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。
vuex 的 mutation 是什么？
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，mutations才是改变状态的执行者。
注意：mutations只能是同步地更改状态。
vuex 的 action 是什么？
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中。
vuex 的 module 是什么？
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

五十八 vue.js和ajax请求代码应该写在组件的methods中还是vuex的actions中?

官方的建议是异步都放在actions中
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

https://www.cnblogs.com/dream111/p/13498993.html