vue面试题_初始化数据哪个周期中就已经完成-CSDN博客

本文链接：https://blog.csdn.net/mjllove/article/details/109691489

vue面试题

一、Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、列举vue的常见指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

1.文本插值：{{}} Mustache

2.DOM属性绑定：v-bind

鼠标悬停几秒钟查看此处动态绑定的提示信息

3.指令绑定一个事件监听器：v-on

逆转消息

4.实现表单输入和应用状态之间的双向绑定：v-model

5.控制切换一个元素的显示：v-if和v-else

现在你看到我了

6.列表渲染:v-for

{{todo.text}}

三、v-if 和 v-show 区别

v-if按照条件是否渲染，v-show是display的block或none

四、vue常用的修饰符？

prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture: 事件侦听，事件发生的时候会调用

五、vue.js的两个核心是什么？

数据驱动、组件系统

六、vue中 key 值的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

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

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

八、query和params的区别

query类似于ajax中get请求，params类似于post请求，前者在浏览器地址栏中显示参数，后者则不显示

如果路由跳转使用path，必须使用query方式传参，

如果使用name跳转，query和params可以使用query传参，参数可以保存，使用params传参，页面刷新后，参数不会保存

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name。

注意点：query刷新不会丢失query里面的数据
params刷新会丢失 params里面的数据。

九、Vue的生命周期

1.什么是vue的生命周期

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

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

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

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

会触发下面这几个beforeCreate, created, beforeMount, mounted 。

4.vue生命周期总共有几个阶段？

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

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

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

十、对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

viewmodel和model实现双向数据绑定

十一、vue中的路由拦截器的作用？

路由拦截，权限设置

例如：当用户没有登录权限的时候就会跳转到登录页面，用到的字段requireAuth:true

十二、axios的作用？

vue中的ajax，用于向后台发起请求

安装：npm install axios --save

特点：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF

promise：

一个对象用来传递异步操作的信息

promise的出现主要是解决地狱回调的问题，无需多次嵌套

本质：分离异步数据获取和业务

拦截器分为请求拦截器和响应拦截器：

1.请求拦截器：

axios.interceptors.request.use(function(config){
        return config;
    },function(error){
        return Promise.reject(error);
    });

2.响应拦截器

axios.interceptors.response.use(function(response){
        return response;
    },function(error){
        return Promise.reject(error);
    });

十三、Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。