vue面试题

Vue面试题

一、Vue的生命周期

1、什么是vue生命周期

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

2、vue生命周期的作用是什么

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

3、vue生命周期总共分为几个阶段

​ 总共分为8个阶段：beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、uppdated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)，之后还有如果多次出现销毁创建同一个组件，那么用<keep-alive></keeplive>可以把它缓存到内存中，也可以利用activated deactivated来激活或者停用组件，来控制组件状态

4、第一次页面加载会触发生命周期的哪几个阶段

​ 会触发beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)这几个阶段

5、请列举出3个Vue中常用的生命周期钩子函数

​ created: 实例已经创建完成之后调用

​ watch: 事件回调

​ activated: keep-alive组件激活时调用

二、Vue组件及封装

1、vue父子组件之间的传值

​ 子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据

2、vue组件的好处

​ 组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了 传统项目开发中：效率低、难维护、复用性等问题

3、封装vue的过程

​ 使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。子组件修改好数据后，可以采用$emit方法传递给父组件

4、vue的优点

• 低耦合：视图(View)可独立于Model变化和修改
• 可重用性：可以把一些相同的视图逻辑放在一个ViewModel中，让多个view重用这段视图逻辑
• 独立开发：开发人员可专注于业务逻辑和数据的开发
• 可测试：测试可针对ViewModel来写

三、Vue的路由实现

1、vue路由实现的模式

​ hash模式和history模式

​ hash模式：在浏览器中符号"#"，#及#后面的字符称之为hash，用window.location.hash读取

​ 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重载页面

​ history模式：history采用HTML5的新特性；且提供了两个新方法：pushState(),replaceState()可以对浏览器历史记录站进行修改，以及popState事件的监听到状态变更

2、嵌套路由怎么定义

当有多层组件嵌套的时候，可以考虑嵌套路由实现

因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
可能还会问如何实现重定向： 使用redirect配置

四、Vuex面试相关

1、vuex是什么？怎么使用？哪种功能场景使用它

​ vuex是vue框架中的状态管理；改变状态的方式是提交mutations，这个是同步的事务；异步逻辑应该封装在action中

​ 在main.js中引入store,注入。新建一个目录store，…export(导出)

​ 场景使用：单页应用中，组件之间的状态、影月播放、登陆状态、加入购物车

2、vuex中有哪几种属性

​ 有5种，分别是state、mutations、actions、modules、getters

​ state: vuex使用单一状态树,即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突，存放的数据状态，不可以直接修改里面的数据

​ mutations: mutations定义的方法动态修改Vuex的store中的状态或数据

​ actions:可以理解为异步操作mutations中的数据

​ modules:项目特别复杂时，可以让每一个模块拥有自己的state、mutations、actions、getters,使得结构变得清晰，方便管理

​ getters: 过滤一些数据，让state中的数据复杂化

五、vue-cli如何新增自定义指令

1、创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2、全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3、指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

六、vue指令

1、v-if 和 v-show 区别

​ v-if按照条件是否渲染，可以在内存中直接销毁；v-show是用css样式中的display属性来控制

2、vue几种常用指令

​ v-for、v-if、v-show、v-bind、v-on、v-moudle

3、为什么避免 v-if 和 v-for 用在一起

​ 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

七、axios和ajax的区别：

​ 区别： axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

​ axios：用于浏览器和node.js的基于Promise的HTTP客户端

• 从浏览器制作XMLHttpRequests
• 让HTTP从node.js的请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换为JSON数据
• 客户端支持防止XSRF

​ 优缺点： ajax： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务 axios： 从 node.js 创建 http 请求 支持 Promise API 客户端支持防止CSRF。

八、什么是MVVM

​ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

​ 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

​ ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

九、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合

​ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

​ 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

​ 场景：数据操作比较多的场景，更加便捷