2020-09-03

A类:

A1. let和var的区别？

相同点: 作用都是定义变量关键字

区别点：

    作用域只限制于当前代码块{}   -----   var的作用域则是函数体function(){}

    使用let声明变量的作用域不会提示  -----   而var会自动提升

    在相同的用作用域下不能有相同的变量，否则报错  ------   而var中则可以出现相同变量名，且不会报错。

    for循环提现父子作用域。

A2. 解构赋值是什么？ 

      ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring ）。

      只要等号两边的模式相同，左边的变量就会被赋予对应的值。

A3. 基本数据类型和引用数据类型的区别？ 

   ECMAScript变量包含两种不同类型的值：基本类型值、引用类型值；

   基本类型值：指的是保存在**栈**内存中的简单数据段；

   引用类型值：指的是那些保存在**堆**内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值

A4. 子组件如何传值给父组件

    $emit方法传递参数

A5. v-if和v-show的区别及使用场景？

     当一个元素会被频繁的显示和影藏时，使用v-show。

     当元素在响应式网页的操作过程中，根据不同用户的需求，可能永远不会被显示或被隐藏，则选择使用v-if。

A6. v-clock有什么作用？ 

     v-clock能够解决插值表达式闪烁的问题，需要在style中设置样式[v-clock]{display：none}

A7. 组件之间的通讯分几种分别是什么？ 

     父传子                  子传父                    兄弟组建传值

A8. Vue-router共有几种模式？默认是哪种？ 

     2种 hash history                 hash

A9. Vuex是什么?   

     全局状态管理工具

A10. vue.js的两个核心是什么

    数据驱动、组件系统

A11. vue如何自定义过滤器

    局部的 全局的  filters Vue.filter  

A12. vue如何新增自定义指令

​           局部全局

​           directives

​           Vue.directive

A13. 路由对象route和router的区别

    路由信息对象 路由实例

A14. params和query的区别？  

     get传参 动态路由传值

A15. axios常用的请求方式有哪些？

     axios.get axios.post  axios.all

A16. $nextTick的作用？  

     应用场景：需要在视图更新之后，基于新的视图进行操作。

A17. vue路由的跳转方式有几种

    两种 router-link   编程式导航  

B类：

B1. 什么是vue的计算属性

    在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式

B2. set数据结构有哪些常用的属性和方法？

   size: 返回Set实例的成员总数。

   add(value)：添加某个值，返回 Set 结构本身。

   delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

   has(value)：返回一个布尔值，表示该值是否为Set的成员。

   clear()：清除所有成员，没有返回值。

B3. 箭头函数和function区别或新增了哪些特性？ 

   写法不同

   this的指向不同

   箭头函数不可以当构造函数

   变量提升

B4. Promise常用方法有哪些及作用是什么？

   ​    Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

B5. 简述虚拟DOM？

    Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述

B6. Vue中双向数据绑定是如何实现的？  

      vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`，在数据变动时发布消息给订阅者，触发相应的监听回调

B7. keep-alive是什么？ 

      <keep-alive>`是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

     <keep-alive> 包裹动态组件时，会**缓存不活动的组件实例**，而不是销毁它们。

B8. Props验证类型都有哪些？ 

     String

     Number

     Boolean

     Function

     Object

     Array

     Symbol

B9. created和mounted区别？ 

       created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

      mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

B10. assets和static的区别？  

     assets中的文件会经过webpack打包，重新编译，推荐在assets存放js等需要打包编译的文件。

     static中的文件，不会打包编译。static中的文件只是复制一遍。static中建议放一些外部第三方文件，自己的放assets里，别人的放static中。（图片推荐放在static里）

B11. vuex中如何异步修改数据？ 

     首先, 概括下 vuex基本使用流程为: 在action中分发异步请求, 在异步回调中提交mutation,在mutation中修改state, 使用getters对state的值进行计算封装.

B12. 简述拦截器是什么，共有几个拦截点，分别是什么？ 

      在数据发出之前或者响应之后处理

      请求拦截器

      响应拦截器

B13. vue的双向绑定原理   

​         Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调

B14. 路由的守卫有几种

​        3种 全局的 独享的 组件内的

B15. 如何让css只在当前vue组件起作用

    在style标签中写入scoped即可 例如：<style scoped></style>

B16. vue常用的修饰符

    .prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

B17. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值

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

C类：

C1. 路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？  

      全局钩子

     某个路由的钩子

     组件内钩子

     to:router即将进入的路由对象

     from:当前导航即将离开的路由

     next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航

C2. Element UI完整引入步骤及按需引入步骤是什么？  

      1、完整引入

     在 main.js 中写入以下内容：

         import Vue from 'vue';

         import ElementUI from 'element-ui';

         import 'element-ui/lib/theme-chalk/index.css';

         import App from './App.vue';

     Vue.use(ElementUI);

         new Vue({

         el: '#app',

         render: h => h(App)

     });

         以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

    2、 按需引入

     借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

     首先，安装 babel-plugin-component：

     npm install babel-plugin-component -D

     然后，将 .babelrc 修改为：

     {      "presets": [["es2015", { "modules": false }]],

             "plugins": [

         [

           "component",

           {

             "libraryName": "element-ui",

             "styleLibraryName": "theme-chalk"

           }

         ]

       ]

     }

     接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 

     import Vue from 'vue';

     import { Button, Select } from 'element-ui';

     import App from './App.vue';

 

     Vue.component(Button.name, Button);

     Vue.component(Select.name, Select);

     /* 或写为

 

      * Vue.use(Button)

      * Vue.use(Select)

         */

 

     new Vue({

       el: '#app',

       render: h => h(App)

     });

 

C3. 介绍Vuex的核心概念及其作用？

        state 数据源载体

        getters 用于改变state的值，派生出多个数据源

        mutation 唯一可以提交可以改变state的状态，也就是数据的属性值

        actions 提交的是mutation,用commit提交 而不是直接变更状态，可以包含任意异步出操作

        modules 拆分成多个模块   

C4. Vue与Angular以及React的区别

     React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。

    不同点：

    React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

C5. 对keep-alive 的了解

    keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

    在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 

C6. 简述MVVM和MVC？

   mvc

       Model（模型）

       View（视图）

       Controller（控制器）

       简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。

   mvvm

      Model 代表数据模型

      View 代表UI视图

      ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)

      简单理解：视图请求数据，将请求发送至控制器，在控制器的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定

C7. 兄弟组件如何传值

    eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适

C8. 写出常用的指令

    v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）

    v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index

    v-show 显示内容 （同angular中的ng-show）

    v-hide 隐藏内容（同angular中的ng-hide）

    v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）

    v-else-if 必须和v-if连用

    v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误

    v-bind 动态绑定 作用： 及时对页面的数据进行更改

    v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

    v-text 解析文本

    v-html 解析html标签

    v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'

    v-once 进入页面时 只渲染一次 不在进行渲染

    v-cloak 防止闪烁

    v-pre 把标签内部的元素原位输出

C9. 生命周期共有几个？分别在什么时候使用？ 

     beforeCreate（创建前）,

     created（创建后）,

     beforeMount(载入前),

     mounted（载入后）,

     beforeUpdate（更新前）,

     updated（更新后）,

     beforeDestroy（销毁前）,

     destroyed（销毁后）

C10. 自定义指令 有哪些钩子函数，及自定义指令的使用场景？ 

      bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

     inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

     update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

     我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

     componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

     unbind：只调用一次，指令与元素解绑时调用。

     使用场景

     代码复用和抽象的主要形式是组件

     当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令

     但是，对于大幅度的 DOM 变动，还是应该使用组件

C11. 单页面应用和多页面应用区别及优缺点？ 

     单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

     多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

     单页面的优点：

     1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

     2，前后端分离

     3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

     单页面缺点：

     1，不利于seo

     2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

     3，初次加载时耗时多

     4，页面复杂度提高很多

C12. 渐进式框架的理解？ 

      每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

     使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；

     还可以用它的视图，搭配你自己设计的整个下层用。

     也可以函数式，都可以。

     它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

     你不必一开始就用Vue所有的全家桶，根据场景，官方提供了方便的框架供你使用。

C13. methods computed watch的区别？ 

     computed是在HTML DOM加载后马上执行的，如赋值；

     而methods则必须要有一定的触发条件才能执行，如点击事件；

     watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

     所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

C14. 列举常用指令以及作用？ 

     v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）

    v-for 格式： v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index

    v-show 显示内容 （同angular中的ng-show）

    v-hide  隐藏内容（同angular中的ng-hide）

    v-if    显示与隐藏  （dom元素的删除添加 同angular中的ng-if 默认值为false）

    v-else-if  必须和v-if连用

    v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误

    v-bind  动态绑定  作用： 及时对页面的数据进行更改

    v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数  函数必须写在methods里面

    v-text  解析文本

    v-html   解析html标签

    v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'

    v-once  进入页面时  只渲染一次 不在进行渲染

C15. 简述虚拟DOM？

    Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述

C16. 请描述一下你对webpack的理解？ 

   Webpack 是什么

   webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 

   简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后**解析出模块之间的依赖**，将代码打包。

   为什么需要打包？

   - 像sass，JSX等代码虽然极大的提高了开发效率，但是本身并不被浏览器所识别，需要我们对其进行编译和打包，变成浏览器识别的代码

   - 模块化(让我们可以把复杂的代码细化为小的文件)

   - 优化加载速度(压缩和合并代码来提高加载速度，压缩可以减少文件体积，代码合并可以减少http请求)

   - 使用新的开发模式