vue面试题汇总

1. vue特点

   （1）vue是一套轻量级的mvvm框架，具有简洁的API和容易上手的操作机制，它是渐进式和自底向上的，渐进式就是只关注当前的功能需求，其他的先不管，自底向上是先搭建基础的内容，然后再进行完善补充

   （2）只关注视图层，双向数据绑定（保留了react的优点）实现了html的封装和重用，在构建单页面上有独特的优势

   （3）视图、数据、结构相分离，数据更改方便

   （4）采用虚拟dom，不使用原生的dom结点，

   （5）相比于react运行速度更快，（同样操作虚拟dom的时候，性能更高）

2. 父组件向子组件传值

   通过props传值

   <template>
     <div>
           <my-header title="这是父组件传的值"></my-header>
     </div>
   </template>
   
   <script>
   import Header from '@/views/Header'
   export default {
       components:{
           'my-header':Header
       }
   }
   </script>
   

   <template>
     <div>
         {{title}}
     </div>
   </template>
   
   <script>
   export default {
       props:{
           title:String
       }
   }
   </script>
   

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

   子组件定义函数，用$emit触发父级的自定义函数，$emit(),括号里面的参数是父级的自定义函数名，然后去执行自定义函数

   <template>
     <div>
         <button @click="handClick" style="width:100px;height:100px">子组件按钮</button>
     </div>
   </template>
   
   <script>
   export default {
       methods:{
           handClick(){
               this.$emit('evt')
           }
       }
   }
   </script>
   

   <template>
     <div>
           <my-header title="这是父组件传的值" @evt="click"></my-header>
     </div>
   </template>
   
   <script>
   import Header from '@/views/Header'
   export default {
       components:{
           'my-header':Header
       },
       methods:{
           click(){
               console.log('子组件向父组件传递事件')
           }
       }
   }
   </script>
   

4. v-show和v-if的共同点和不同点

   v-show和v-if都是设置显示隐藏的，

   v-show设置隐藏的时候是通过控制display的none属性值，设置隐藏，

   v-if是直接销毁，

   当需要频繁切换的时候，应该选择v-show，降低性能消耗

   ---

   （动态的向dom树内添加或者删除dom元素，如果初值为false，就不会编译了）

   ---

5. 如何让css只在当前的组件中起作用

   在style里加scoped

6. keep-alive的作用是什么

   vue的内置组件，可以包裹动态组件，控制缓存，放在keep-alive里面的内容，会被缓存，不会销毁

   include属性匹配的值，会被缓存，不会被销毁

   exclude属性匹配的值，不会被缓存

7. 如何获取dom

   通过ref属性（类似于js中的id）

   比如：ref=“aaa”，使用的时候，this.$refs.aaa

8. 说出几种vue当中的指令和它的用法

   • 插值

     v-text

     v-html 可以渲染超文本

   • 条件渲染

     v-if 控制显示隐藏

     v-else

     v-else-if

   • 列表渲染

     v-for 循环

   • 事件绑定

     v-on

   • 属性绑定

     v-bind

   • 表单绑定

     v-model

9. vue-loader是什么，使用它的用途有哪些

   是vue文件的一个加载器，将template/js/style转换成js模块，

   用途是：js可以写成es6、style可以是sass或者less，template可以加jade

   ---

   关于vue-loader：

   ​ 一个以.vue结尾的文件，是如何被编译并且运行到浏览器

   概念：

   ​ vue-loader是基于webpack的一个loader（用来打包、转译js或者css文件，就是把自己写的代码转换成浏览器可以识别的，还有压缩等的功能），解析和转换.vue文件，提取出其中的script（逻辑）、style、html模板（template），然后再交给对应的loader去处理，核心的作用就是提取

   作用：

   • vue-loader允许vue组件的每个部分使用其他的webpack loader，（例如在style部分，使用sass，在template使用pug）
   • 允许一个.vue文件中使用自定义模块，和template中的引用资源当作模块依赖来处理
   • 为每个组件模拟出scoped CSS
   • 在开发过程中使用热重载保持状态

   实现过程：

   • ​ selector将.vue文件解析拆分成一个parts对象，其中分别包含style、script、template
   • style-compiler-解析style部分
   • template-compiler解析template部分，babel-loader解析script部分，并转换为浏览器能识别的普通js

   ---

10. 为什么使用key

    给每个节点作唯一的标识，减少多余的更新渲染，高效的更新虚拟dom

11. axios以及安装

    axios安装时npm install axios --save

    用来请求后台资源的模块，在js中用import引进来，然后.get或者.post，.then函数是返回成功，.catch是失败

12. v-model的使用

    实现数据的双向绑定，它做了两个操作：v-bind和v-on

    ---

    单向绑定就是把Model绑定到View，用JavaScript代码更新Model时，View就会自动更新

    双向绑定，如果用户更新了View，Model的数据也自动被更新了

    例如，当用户填写表单时，View的状态就被更新了，MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定。
    双向数据绑定=单向数据绑定+UI（User Interface用户界面）事件监听

    ---

13. vue.cli项目中src目录每个文件夹和文件的用法

    assets-静态资源

    components-公共组件

    router-路由配置

    store-状态管理

    views-视图组件

    APP.vue根组件

    main.js入口文件

14. computed和watch的使用场景

    computed计算属性，一个属性受到多个属性影响

    watch，一个数据影响多个数据，需要通过监听查看它的变化

15. v-on可以监听多个方法吗

    可以，使用对象是方式同时监听多个函数

    v-on="{ input:onInput,focus:onFocus,blur:onBlur, }"

16.** $nextTick的使用**

修改了data的值，然后马上获取这个dom的值，是不能获取到更新后的数据，使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后再获取，就可以成功获取到了

17.** vue组件中data为什么必须是一个函数**

组件中的data，写成函数，数据以函数返回值的形式去定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，数据不会混乱，如果只是以对象的方式，就是所有组件共用了一个data，一改都改，是混乱的

18. 渐进式框架的理解

    根据不同的需求选择不同的方法，可以依旧使用第三方库，第三方插件，主张弱，没有强制性要求

19. Vue中双向数据绑定的实现

    见12----v-model的使用

    vue双向数据绑定是通过数据劫持和发布订阅来实现的

    双向数据绑定，首先是model绑定view，当model的数据改变，view的数据也会发生改变，如果view的状态改变，mvvm框架可以自动更新model的状态，

20. 单页面应用和多页面应用的区别以及优缺点

    单页面：交互的时候，只刷新局部，获取局部资源，用户体验感好，但是浏览器一开始就要加载所有的内容，不利于seo优化，页面复杂度高

    多页面：页面跳转的时候是整页刷新，

21. v-if和v-for的优先级

    v-for的优先级更高，如果一起使用，v-if会重复运行在每个v-for中，一般会提示将v-if放到v-for的外面

22. assets和static的区别

    assets和static都是静态资源目录，

    但是assets中的内容，会在项目打包的时候，也进行打包压缩体积，会对静态内容进行编译压缩等等，

    static不会打包压缩，会占据更多的空间

    一般是css，js都可以放在assets里面，引入的第三方文件可以放在static里面

23. vue修饰符

    .stop 阻止事件继续传播

    .prevent 组织默认行为

    .self 只有自身触发的时候才会执行

    .once 只执行一次

    .capture 事件冒泡的优先级

24. vue的两个核心点

    数据驱动：数据视图一致性

    组件系统：由组件树构成

25. vue和jQuery的区别

    jQuery是通过$获取原生结点，然后去操作dom

    vue面向数据，它操作的是虚拟dom，最后映射到真实的dom树上

    将数据和视图分离，对数据进行操作，不需要获取dom对象

26. 引用组件的步骤

    引入、注册、使用

    //渲染

    **

    import xxx from ‘…xxx.vue’

    components:{

    ​ //注册

    ​ ‘ccc’:xxx

    }

    在template里面引入组件

    在script中用import引入路径

    在components中写组件名

27. delete和Vue.delete删除数组的区别

    delete只是被删除的元素的值变成了empty/undefined，键还在，vue.delete直接删除了这个键值对，改变了数组的键值

28. SPA首屏加载慢如何解决

    使用CDN托管，路由懒加载写法

    ---

    SPA:

    概念：单页web应用，加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序

    特点：

    ​ 更好的用户体验，不需要重新刷新页面，获取数据是通过ajax异步获取，页面显示流畅

    ​ 使用的是mvvm的开发模式，前后端分离，减轻服务器压力，服务器只要出数据，不用管展示逻辑和页面合成，能够提高吞吐能力

    ​ 路由：在URL中，采用#作为当前视图的地址，改变#后面的参数，页面不会重载

    ​ 共用一套后端程序代码，可以同时应用于web界面、手机端等客户端

    缺点：

    ​ 首屏渲染等待时间长：必须得加载完毕，才能渲染出守屏

    ​ 对于seo不友好：爬虫只能拿到一个div，不利于seo

    ---

29. Vue-router跳转和location.href有什么区别

    vue-router是通过$route.push({path:’’,query:’’})，使用了diff算法，按需加载，减少了dom的消耗

    location.href跳转简单方便，

30. vue-slot

    使用插槽将内容分发给API,在要接收的子组件模板里面编写slot组件，这个slot组件将接收父组件传的内容，父组件使用template定义对应的组件，去传要显示在slot中的内容

31. 你们vue项目是打包了一个js文件，一个css文件，还是有多少个文件

    根据vue-cli脚手架规范，一个js文件，一个css文件

32. Vue里面router-link在电脑上有用，在安卓上没反应怎么解决

    Vue路由在Android上是存在问题的，babel的问题，可以安装babel polypill插件解决

33.** Vue2中注册在router-link上事件无效解决方法**

使用@click.native，router-link，会阻止click事件，.native指直接监听一个原生事件

34. RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

    法一：只用a标签

    法二：使用button标签和router.navigate方法

35. axios的特点

    从浏览器中创建XMLHttpRequest

    node.js创建http请求

    支持promise API

    拦截请求和响应

    转换请求数据和响应数据

    自动转换json

    axios中发送的字段的参数是data和params两个，二者的区别在于params是跟请求地址一起发送的，data的作为一个请求体发送

    params一般适用于get请求，data一般适用于post put请求

36. 请说一下封装vue组件的过程

    脚手架安装，搭建模板，写样式，写逻辑

    组件的数据输入，分析好逻辑，定好props里面的数据

    组件的数据输出，根据组件逻辑，做好要暴露出来的方法

    封装完毕，直接调用

37. params和query的区别

    query要用path来引入，params要用name来引入

    接收参数的时候this.$route.query.name或者是this.$route.params.name

    query类似与get请求，地址栏中会显示参数，params类似于post，刷新页面query不会丢失参数，params会丢失

38. vue初始化页面闪动问题

    使用vue开发，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会出现花屏的现象，解决的方法就是在css中设置

    [v-cloak]{

    ​ display:none;

    }

    如果没有彻底解决问题，则在根元素加上style=“display:none;” :style="{display:‘block’}"

39. vue更新数组时触发视图更新的方法

    push();pop();shift();unshift();splice();sort();reserve()

40. vue常用的UI组件库

    vant,Element UI,

    Mint UI,VUX(移动端)

41. vue修改打包以后静态资源路径的修改

    cli2版本：将config/index.js里的assetsPublicPath的值改’./’

    ---

    （生命周期）

42. 什么是vue生命周期，有什么作用

    每个vue实例在被创建的时候，都会经过的一系列的初始化的过程，给用户在不同阶段添加自己代码的机会，生命周期钩子就是生命周期函数

43. 第一次页面加载会触发哪几个钩子

    beforeCreate，Created，beforeMount，mounted

44. 简述每个周期具体适合哪些场景

    beforeCreate：在new一个vue实例以后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化

    created:data和methods都已经被初始化，如果要调用methods中的方法，或者操作data中的数据，最早可以在这里进行操作

    beforeMount：在内存中已经编译好了模板，但是还没有挂载到页面，页面中还是旧的内容

    mounted：vue实例初始化已经完成，组件脱离了创建阶段，到了运行阶段，如果想通过插件操作页面上的dom结点，最早可以在这里进行操作

    beforeUpdate：执行时，页面的内容还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

    updated：页面显示的数据和data中数据已经保持同步率，都是最新的

    beforeDestroy：Vue实例从运行阶段进入到了销毁阶段，这个时候上的所有data和方法都是可用的

    destroyed：这个时候所有的data和methods，指令，过滤器，都是不可用的状态，组件已经被销毁了

45. created和mounted的区别

    created：在模板渲染成html之前调用，也就是初始化某些属性值，然后再渲染成视图

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

46. vue获取数据在哪个周期

    获取数据在created之后就可以，但是如果要操作dom就需要在mounted的时候才可以

47. 详细说一下对于vue生命周期的理解

    （路由）

    见44

    vue生命周期，总共分为8个阶段，

    创建前后，挂载的元素$el和数据对象data都是undefined，没有初始化，创建后，data有，但是dom没有（就是$el)

    载入前后，都初始化以后，载入前，挂载的是虚拟的dom结点，data.message还没有替换，载入后，挂载成功，data.message替换成功

    更新前后，data变化会触发

    销毁前后，vue实例解除了事件监听和dom的绑定，但是dom结构依旧存在

48.mvvm框架是什么

mvvm，是model，view，viewModel，视图改变更新模型层，模型层改变更新视图，使用双向绑定的技术，让二者变化同步

• vue-router

  vue用来写路由的一个插件

  router-link

  router-view

• active-class是哪个组件的属性

  vue-router 模块的router-link组件的属性，用来做选中样式的切换，children数组定义子路由

• 怎么定义vue-router的动态路由，怎么获取传过来的值

  动态路由是用/：id，获取的时候是$router.params.id

• vue-router有哪几种导航钩子

  全局导航：

  组件内导航

  单独的路由

• $route和$router的区别

  $router是VueRouter的实例，在script标签中想要导航到不同的url，使用$router.push方法

  $route是当前route跳转的对象，里面可以获取当前路由的name，path，query，params等

• vue-router的两种模式

  hash模式：地址栏中会有#

  history模式：window.history对象打印出来，可以看到它提供的方法

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

  • 路由懒加载就是按需加载
  • 使用它是为了给客户更好的用户体验，让首屏的加载速度更快，解决白屏问题
    -实现方式： vue异步组件，异步加载，按需加载；使用import
  • webpack提供的require.ensure(),vue-router配置路由

• vuex是什么，怎么使用，哪种功能场景使用它

  vuex是专门为vue.js提供的状态管理工具，

  使用时：（-vuex应用场景）

  可以应用在单页（单页应用扩展-），组件之间状态，登录状态，获取购物车数据

1. vuex 作为 vue 生态中用于状态管理的一种模式，已被广泛应用于 vue 单页应用开发中

3. vuex 的几个核心概念Store：
Vuex 使用一个 Store 对象管理应用的状态
State：State 意为“状态”，是 vuex 状态管理的数据源。
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

4. 总的来说
我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

5. 应用场景
小型使用 Vuex 繁琐冗余，简单的 global event bus（它使用是在不是父子组件通信的时候，通过一个空的vue实例作为中转站，也叫事件中心） 就足够。
vuex 一般用于中大型 web 单页应用   中对  应用的状态进行管理
对于一些组件间关系较为简单的小型应用，可以用组件 prop 属性或者事件来完成父子组件之间的通信，
vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

6. 使用 vuex 解决跨组件通信问题
跨组件通信一般指非父子组件间的通信，父子组件的通信一般可以通过以下方式：
	1、通过 prop 属性实现父组件向子组件传递数据
	2、通过在子组件中触发事件实现向父组件传递数据
非父子组件之间的通信一般通过一个空的 Vue 实例作为 中转站，也可以称之为 事件中心、event bus
采用 event bus 的方式适合简单的跨组件事件触发，对于多层级组件嵌套等较为复杂的场景，使用 vuex 能更好地应对。vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的，此时的数据完全独立于组件，因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。

7.vuex 作为数据存储中心
vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用，可以将组件中用到的数据存储在 State 中，并在 Action 中封装数据读写的逻辑。 目前主要有两种数据会使用 vuex 进行管理：
1、组件之间全局共享的数据
2、通过后端异步请求的数据

在实际的项目开发过程中更多的是应用第二种，即把通过后端异步请求的数据都纳入 vuex 状态管理，在 Action 中封装数据的增删改查等逻辑，这样可以一定程度上对前端的逻辑代码进行分层，使组件中的代码更多地关注页面交互与数据渲染等视图层的逻辑，而异步请求与状态数据的持久化等则交由 vuex 管理。

• vuex有哪几种属性

  state-存放数据

  mutations-操作state里面的数据

  actions-操作mutations

  getters–从基本数据里面派生出来的数据

  module-模块化Vuex

58.vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

如果请求到的数据只是自己使用，就不用放到vuex里面的state里面，如果是经常被复用的，就应该将这个请求放到actions里面，方便复用