vue 常见面试题

1.vue生命周期

        什么是Vue生命周期？

                Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

        Vue生命周期的作用是什么？

                它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

         Vue生命周期总共有几个阶段？

                它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

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

                第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

       DOM渲染在哪个周期中就已经完成？

                DOM 渲染在 mounted 中就已经完成了

        每个生命周期适合哪些场景？

                生命周期钩子的一些使用方法：

                beforecreate : 可以在这加个loading事件，在加载实例时触发

                created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

                mounted : 挂载元素，获取到DOM节点

                updated : 如果对数据统一处理，在这里写上相应函数

                beforeDestroy : 可以做一个确认停止事件的确认框

                nextTick : 更新数据后立即操作dom

                beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。

                created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有

                beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点

                mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点

                beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器

                updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环

                beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件

                destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

2.v-show与v-if区别

        v-show是css切换，v-if是完整的销毁和重新创建

        使用 频繁切换时用v-show，运行时较少改变时用v-if

        v-if=‘false’ v-if是条件渲染，当false的时候不会渲染

3.Vue中hash模式和history模式的区别

        在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。

  Vue底层对它们的实现方式不同:
   hash模式是依靠onhashchange事件(监听location.hash的改变)
   history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。

           当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有路径path的(例如www.libai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面。

4.data为什么是一个函数

        因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。

        所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题。

5..Vue中的key到底有什么用？

        key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。

  diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。

        简单来说，主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

6.$route和$router的区别

  $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

       而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

7.谈谈你对 keep-alive 的了解？

        keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

        一般结合路由和动态组件一起使用，用于缓存组件；

        提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

        对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

       包裹动态组件(组件)时，会缓存不活动的组件实例，而不是销毁它们
       组件切换调用的时候本身会被销毁掉的，只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来， 下一次使用的时候直接从缓存中调用

8.Vue 组件间通信有哪几种方式？

        props/$emit实用于 父子组件通信

                这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

  ref与$parent/$children 适用 父子组件通信

                ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

                $parent / $children：访问父 / 子实例

  EventBus($emit/$on)适用于 父子、隔代、兄弟组件通信

                这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件

  $attrs/$listeners 适用于 隔代组件通信

                $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

                $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

  provide/inject 适用于 隔代组件通信

                祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

  Vuex 适用于 父子、隔代、兄弟组件通信

                Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

                Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

                改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

9.请介绍一下你对vuex的理解？

        Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

        Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

        改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块：

        State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

        Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

        Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

        Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

        Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

10.params和query的区别

        引入方式不同： query要使用path来引入，params要使用name来引入，接受参数格式类似，引用分别是this.$route.query.name和this.$route.params.name

        形成的路径不同（或者url地址显示不同）：

                使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。

                params传递后形成的路径：/router/123,/router/zhangsan

                query传递后形成的路径：/router?id=666&name=zhangsan

        是否受动态路径参数影响

                Query传递的参数不会受路径参数的影响，会全部展示到路径上，刷新不会丢失query里面的数据；

                params传递的参数会受路径参数的影响，只会展示含有动态路径参数的部分，刷新会丢失没有设置动态路径参数的params的数据。