前端面试问题集（部分）

作者: 我是一小白白 | 来源:发表于2019-03-21 23:40 被阅读0次

一、vue框架开发项目用到了哪些技术

vue + vuex + vue-router + axios + es6 + webpack

二、vuex 有什么作用

vuex用于程序开发的状态管理，它采用集中式存储，管理应用的所有组件的状态，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
使用：
1、在main.js中引入vuex：import Vuex from 'vuex'，
然后挂载使用它：Vue.use(Vuex)
2、在main.js中加入：var store = new vuex.Store(){
state:{
count:0
}}

三、请求后台数据是如何请求的

用axios，请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。如果成功返回在.then函数中，失败则是在.catch函数中。

四、vue路由怎么创建和使用

在index.js中引入import vue-router
引入路由页面：import 路由页面
挂载使用：Vue.use(Router)
创建路由实例：export default new Router
在路由实例中进行路由路径配置：routes[{
path:Home ,name: ,component: },{},{}]
子路由：children:[{path: ,component: },{},{}]

五、vue组件间怎么传值

父组件向子组件传递数据：
只需要在子组件通过v-bind传入一个值，在子组件中，通过props接收，即可完成数据的传递
子向父传输数据：
子组件定义一个事件来触发，
父组件需要用到emit函数来传参数。

六、vue组件怎么引用

编写子组件
在需要使用的父组件中通过import引入
在vue的components中注册
在模板中使用

七、mvvm开发模式介绍一下

module+view+viewModule，在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

八、vue中跨域如何处理

vue的webpack文件中配置跨域：在根目录下config的index.js文件中配置，changeOrigin:true //是否跨域
target：目标接口域名

开发环境下，如何做好跨域配置

首先跨域我们要配置的文件有：config下的index.js

  dev: {

      proxyTable: {

          '/api': {

                  target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号

                  changeOrigin: true, //跨域

                  pathRewrite: {

                             '^/api': '/' //这里理解成用‘/api’代替target里面的地址，

                              后面组件中我们掉接口时直接用api代替

                              比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，

                              直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

                              在开发环境显示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22

                                  } }

config/dev.env.js：

module.exports = merge(prodEnv, {

                                NODE_ENV: '"development"',//开发环境

                                API_HOST:"/api/"

                                })

生产环境中最好的办法是后端在服务器端口加个代理，效果类似开发时webpack的代理。

axios发送get post请求问题
发送post请求时一般都要设置Content-Type，发送内容的类型，application/json指发送json对象但是要提前JSON.stringify()一下。application/xxxx-form指发送？
a=b&c=d格式，可以用qs.stringify()的方法格式化一下，qs在安装axios后会自动安装，只需要组件里import一下即可。
const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

九、如何判断用户的登录状态

vuex + localstorage （用于长期登录+判断用户是否已登录+适合长期保存在本地的数据）

十、页面已经更新，但是数据没有变化，浏览器缓存如何处理

其实解决这个问题很简单，缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后，在更换一下css的文件名就可以了。如原先html中的css调用语句如下：

改一下css文件名：

给css/js文件加个版本号
第一种方法修改css/js后改文件名确实麻烦，所以我们可以加载css/js语句中加入版本号（即css/js链接中？后面的内容）就可以了。如原先的HTML中的css调用语句如下：

十一、用户如果一直提交数据，怎么办

可以将提交的按钮状态更改，提交之后按钮变为不可用。

十二、get和post请求方式区别

get 用的是浏览器的url地址传输，传输数据有限，内容公开，不安全
post 用的是请求体传输，比较安全，传输的数据也比较大

十三、git如何处理版本冲突和新建合并分支

处理冲突：
先把云上的pull下来，然后在本地合并修改之后，再commit，再push到云上。
创建合并分支：

git branch xxx （创建分支）
git checkout xxx （检出）
git merge （合并分支）

十四、数据双向绑定实现和原理

用v-module实现的，VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

十五、webpack有什么作用，配置

可以自动编译TypeScript为JavaScript
webpack-cli/vue-cli 自动生成配置文件
webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
webpack打包原理：把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

十六、es6的一些写法

let和const：使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也可以称之为常量。
可省略 :function，更简便，
箭头函数中，它没有自己的this，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
模板字符串：是为了解决使用+号拼接字符串的不便利而出现的。使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。
来看看ES6的函数默认值写法：
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());
在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开。例如：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

十七、H5 的一些新特性

新增了一些语义化标签：header、footer、nav、aside、article、audio、video等
媒体查询 @media 可以做出响应式页面
新表单元素的引入（智能表单，对自动输入的内容做基本的校验）：input：type=number（数字）、email（邮箱）、url（地址）、range（滑块）、date（日期）等，placeholder（占位符）、require（必填项）。
本地存储：webstorage：sessionStorage和localStorage

sessionStorage（会话期间有效，关闭浏览器窗口就失效，容量5M，不同页面或标签页面间无法共享，适用于敏感账号一次性登录）
localStorage（本地存储永久有效，多窗口共享，容量5M，用于长期登录+判断用户是否已登录+适合长期保存在本地的数据）

获取地理位置的api：Window.navigator.geolocation.getCurrentPosition(success,error)

十八、Html的语义化

1、在没有css的渲染下，依然能够清晰的看出页面的结构，方便开发人员开发。
2、语义化更有可读性，便于团队开发和维护。
3、便于seo，便于搜索引擎的搜索。

十九、cookie、sessionSttorage、localStory区别

数据存储大小
cookie：4kb
webStorge：5mb
数据存储有效期限
cookie：根据自己的设置时间
sessionStorage：关闭窗口后失效
localStorage：永久有效除非js删除或者浏览器删除
作用域
cookie和localStorage是在同源窗口，同一个浏览器共享的，sessionStorage只在同一个标签页共享。

二十、从输入网址到页面加载发生了什么

大概分为以下过程
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

二十一、图片很多如何进行优化

可以进行懒加载或者是分页加载。

二十二、移动端适配怎么配置

viewport，三个属性
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"

网友评论

本文标题：前端面试问题集（部分）

本文链接：https://www.haomeiwen.com/subject/vfhhvqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！