Skip to main content
 Web开发网 » 站长学院 » 织梦教程

20 道必看的 Vue 面试题 | 原力计划

2021年10月11日7970百度已收录

20 道必看的 Vue 面试题 | 原力计划  jQuery面试 第1张

作者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

1. 什么是 MVVM?

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

2. 父组件向子组件传值的方法?

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收:可以传递任何类型(数组,对象,各种数据类型等等)

props:[‘title’,‘likes’,‘isPublished’,‘author’];

props:{title:String,likes:Number}

详细介绍看这篇:Vue 父组件向子组件传值

3. 子组件向父组件传值的方法?

子组件向父组件传值用 this.$emit(key,value) ,父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key,格式:@Key=“方法名”,父组件声明这个方法,方法带参数,这个参数就是子组件传递的 Value。

详细介绍看这篇:Vue子组件向父组件传值

4. Vuex 是什么?哪种功能场景使用它?

Vuex 是专门为 Vue.js 设计的状态管理模式,它采用集中式储存管理 Vue 应用中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

当项目庞大的时候使用它:

需要动态的注册响应式数据;

需要命名空间 namespace 来管理组织我们的数据;

希望通过插件,来更改记录;方便测试;以上这些需要和希望,都是我们 vuex 需要做的一些事情。

5. Vuex 有哪几种属性?

state:基本数据

getters:从基本数据派生的数据

mutations:提交更改数据的方法,同步!

actions:像一个装饰器,包裹 mutations,使之可以异步。

modules:模块化 Vuex。

6. 如何让 CSS 旨在当前组件中起作用?

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

beforeCreate:Vue 实例的挂载元素 $el 和数据对象 data 都为未定义,还未初始化。

created:vue 实例的数据对象 data 有值了,$el 没有。

beforeMount:vue 实例的 $el 和 data 都初始化了,但还是虚拟的 dom 节点,具体的 data.filter 还未替换掉。

mounted:vue 实例挂载完成,data.filter 成功渲染

beforeUpdate:data 更新时触发。

updated:data 更新时触发。

beforeDestroy:组件销毁时触发。

destroyed:组件销毁时触发,vue 实例解除了事件监听以及 dom 的绑定(无响应了),但 DOM 节点依旧存在。

8. Vue 生命周期总共有几个阶段?

beforeCreate 创建前

created 创建后

beforeMount 载入前

mounted 载入后

beforeUpdate 更新前

updated 更新后

beforeDestroy 销毁前

destroyed 销毁后

9. 说出至少 4 种 Vue 当中的指令和它的用法?

v-html:渲染文本(能解析 HTML 标签)

v-text:渲染文本(统统解析成文本)

v-bing:绑定数据

v-once:只绑定一次

v-model:绑定模型

v-on:绑定事件

v-if v-shou:条件渲染

10. vue-cli 工程中常用的 npm 命令有哪些?

npm install:下载 node_modules 资源包的命令

npm run dev:启动 vue-cli 开发环境的 npm 命令

npm run build:vue-cli 生成生产环境部署资源的 npm 命令

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

build 文件夹:存放 webpack 的相关配置以及脚本文件,在实际开发过程中只会偶尔用到 webpack.base.conf.js,配置 less、babel 等。

config 文件夹:常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号,是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。

node_modules:存放 npm install 命令下载的开发环境和生产环境的各种依赖。

src文件夹 :工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。

其他文件:定义的一些项目信息,说明等等。

12. vue-router 路由的两种模式。

hash 模式:

# 后面的 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新浏览器,每次 hash 值的变化会触发 hashchange 事件。

history 模式:

利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

13. 如何解决 Vue 中的 ajax 跨域问题?

找到 config 文件夹中的 index.js 文件:

修改 proxyTable: {'/api':{ //使用 /api 来代替 " 等等了。

14. Vue 打包命令是什么?Vue 打包后会生成哪些文件?

npm run build :Vue 打包命令

Vue 打包后会在当前工作目录下生成一个 dist 文件夹,文件夹中会有 static 静态文件以及 index.html 初始页面。

15. Vue 如何优化首屏加载速度?

异步路由加载

不打包库文件

关闭 sourcemap

开启 gzip 压缩

16. scss 是什么?

SCSS 是 Sass 3 引入的新语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能,唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进,SCSS 对空白符号不敏感。

17. axios 是什么?怎么使用?

axios 是一个基于 promise 的 轻量级库的出现

特定:

可以在浏览器中发送 XML 请求

可以在 node.js 发送 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应

转换请求数据和响应数据

能够取消请求

自动转化 JSON 格式

客户端支持保护安全免受 XSRF 攻击

如何使用:

npm install --save axios 安装axios

在入口 main.js 中导入 axios

import Axios from 'axios'Vue.propertype.$axios = Axios;使用 axios 发送 get 请求

this.$axios.get('/user?stu_id=1002').then(function(resp) {console.log(resp);}).catch(function(err) {console.log(err);});使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的,所有有两种解决方案,这里只写一种!第二种解决方案是用 QS。

var params = new URLSearchParams;params.append('name','孙悟空');params.append('age',22);let that = this;this.$axios.post(' 是什么?它有哪些组件?

vue-router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由、是图标

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过度系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的连接

HTML 5 历史模式或 hash 模式,在 IE9 中自动降级

自定义的滚动条行为

vue-router 组件:

< router-link to=""> 路由的路径

< router-link :to="{name:’‘l路由名’}"> 命名路由

< router-view> 路由的显示

19. 怎么定义 vue-router 的动态路由?怎么获取传递过来的动态参数?

在 router 目录下的 index.js 文件中,对 path 属性加上 /:id。使用 router 对象的 params.id,例如:this.$route.params.id。

20. MVVM 和其他框架 (jQuery)的区别是什么?哪些场景适合?

Vue 是数据驱动,通过数据来显示视图层而不是节点操作。

处理数据交互的时候挺适合 MVVM 设计模式的。

本文为CSDN博主「红颜祸水nvn」的原创文章,CSDN 官方经授权发布。

原文链接:

欢迎更多的开发者朋友加入 CSDN 原力计划!我们将用全新的方式来释放更多的流量,让优质、有深度、丰富有趣的内容得到精准的流量扶持,同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

20 道必看的 Vue 面试题 | 原力计划  jQuery面试 第2张

☞比尔·盖茨退出微软公司董事会;苹果 WWDC、微软 Build 大会均改为线上举办;Rust 1.42.0 发布| 极客头条

☞11 国股市熔断,“祸及”程序员?!

☞2.2版本发布!TensorFlow推出开发者技能证书

☞Soul App 高管被捕,恶意举报导致竞品被下架

☞2020 年最新版 68 道Redis面试题,20000 字干货,赶紧收藏起来备用!

☞最近一个名为 BTCU 的比特币分叉,准备用新分叉解决比特币网络的旧问题

评论列表暂无评论
发表评论
微信