前端面试问题集（部分）

一、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组件怎么引用

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

七、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调用语句如下：

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

改一下css文件名：

<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>

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

<link rel="stylesheet" href="css/style.css?v=201708" />
将css文件的版本号改成新的：

<link rel="stylesheet" href="css/style.css?v=201709" />

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

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

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

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

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

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

1. git branch xxx （创建分支）
2. git checkout xxx （检出）
3. 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

1. sessionStorage（会话期间有效，关闭浏览器窗口就失效，容量5M，不同页面或标签页面间无法共享，适用于敏感账号一次性登录）
2. 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"