前端必问面试题汇总附音频解析

来源:程序思维浏览:26783次
现在前端很火,技术核心是html5+ccs3+javascript,但是框架很多技术更新很快那么面试时问的问题层次不齐,我总结了一些面试时必问问题和参考答案供大家学习。

第一题:vuex的存储流程

音频解析:


State

(1)Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data。

(2)state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。

mutations:用于同步操作比如会员登录的信息,购物车里的商品等等。

Actions:用于异步操作比如将数据用ajax存放到数据库。

Getters

(1)getters 可以对State进行计算操作,它就是Store的计算属性。
(2)虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用。
(3)如果一个状态只在一个组件内使用,是可以不用getters。

第二题:父传子、子传父、兄弟传值与vuex的区别

音频解析:


父传子:

父组件传过来的值子组件要用props接收。

子传父:

vue2.0中可以使用$emit来向父组件派发事件,父组件中用$on来监听自定义的事件。

第三题:双向绑定的原理

音频解析:


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

在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

第四题:created与mounted的区别

音频解析:


看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素。

而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)

第五题:websocket原理

音频解析:


websocket处于应用层,也是基于TCP实现的。websocket与http同样建立于tcp传输协议之上,通过tcp传输层进行数据传输。

websocket是长连接,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟,但仍然还是无状态的。

WebSocket设计上天生为HTTP增强通信,将会在即时IM通讯,游戏等领域会得到更广泛的利用。

如何说:websocket和http一样是基于tcp传输的,websocket是一个长连接,可以在一个tcp连接上传输多个http请求,所以咱们在做IM通讯的时候不必担心自动断开,只有页面关闭时才能断开或是咱们使用close()方法强行断开。

第六题:说一下promise的理解

音频解析:


promise是es6的一种异步请求构造函数,接收一个参数,是函数,并传入两个参数resolve,reject(可以见到的理解成功后和失败后的回调函数),在我们封装好函数的最后,会return出promise对象,promise对象的原型上有then、catch等方法,then方法中我们协议拿到我们在调用resolve时可以传递的参数并形成promise链,调用reject时,promise链就被破坏了,reject之后的promise都不会再执行,而是直接调用.catch方法;Promise的优势在于,可以在then方法中继续写promise对象并返回,然后继续调用then来进行回调操作。

promise解决回调地域,解决了异步数据执行顺序,比如我们用的axios,就是用promise封装了ajax,那么现在的ajax2也就是fetch用的也是promise。

第七题:VUE路由传参

音频解析:


This.$router.push({path:’/goods’,query:{id}})
This.$route.query.id
This.$router.push({path:’/goods’,params:{id}})
This.$route.params.id

第八题:axios与jq的ajax和vue-resource的区别

音频解析:


Vue-resource

体积小;支持主流浏览器(不支持ie9-);支持promiseAPI和URL templates;支持拦截器。

Axios

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持保护安全免受 CSRF/XSRF 攻击
组件的优势
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
如:导航、列表、弹窗、下拉菜单等

第九题:VUE的生命周期

音频解析:


beforeCreate 初始化之前
created 初始化完成
beforeMount 挂载之前
mounted 挂载完成之后
beforeUpdate 数据更新之前
updated 数据更新之后
beforeDestroy 解除绑定之前
destroyed 解除绑定之后
activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。
deactivated keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。

适应场景:

beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

第十题:v-if与v-show的区别

音频解析:


使用了v-if的时候,如果值为false,那么页面将不会有这个html标签生成。
v-show则是不管值为true还是false,html元素都会存在,只是CSS中的display显示或隐藏
v-if 在切换时有更高的性能开销,而 v-show 在初始渲染时有更高的性能开销。
因此,如果需要频繁切换,推荐使用 v-show,如果条件在运行时改变的可能性较少,推荐使用 v-if。

第十一题:vue的hash和history的区别

音频解析:


vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面

第十二题:vue的优缺点

音频解析:


Vue和React不同点:

Vue:
1.模版和渲染函数的弹性选择
2.简单的语法及项目创建
3.更快的选软速度和更小的体积
2)React:  1.更适用于大型应用和更好的可测试性
2.同时适用web端和原生App
3.更大的生态圈带来更多的支持和工具

Vue和React相同点:

1.利用虚拟DOM实现快速渲染
2.轻量级
3.响应式组件
4.服务器端渲染
5易于集成路由工具,打包工具以及状态管理工具
优秀的支持和社区

第十三题:Vue.js与其他框架的区别?

1.与angularjs的区别
相同点:
都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点:
(1).AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。
(2).在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说,这个优化差异还是比较明显的。
2.与React的区别
相同点:
react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
中心思想相同:一切都是组件,组件实例之间可以嵌套。
都提供合理的钩子函数,可以让开发者定制化地去处理需求。
都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点:
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。
四.应用场景:
针对具有复杂交互逻辑的前端应用;
它可以提供基础的架构抽象;
可以通过AJAX数据持久化,保证前端用户体验
好处:
当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。
Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

第十四题:slot插槽的使用

音频解析:


答:就是将父组件的内容放到子组件指定的位置叫做内容分发。
比如:父组件:
父组件app.vue
<template>
  <div id="app">
    <test-slot>
      <span>我是父组件里的文字,但是我要被放到子组件里</span>
    </test-slot>
  </div>
</template>

<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {

    }
  },
  components:{
    testSlot
  }
}
</script>

<style>

</style>
子组件testSlot.vue
<template>
  <div>
    <h3>test-slot</h3>
    //父组件里的span会替换掉slot所以这里的123是看不见的
    //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
    <slot>123</slot>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  }
}
</script>

<style>

</style>

第十五题:vue中nextTick的使用

音频解析:


答:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。使用时机:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时页面并未全部渲染。在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

第十六题:vue的性能优化

音频解析:


答:

1、使用Keep-alive增加dom缓存和数据缓存。
2、使用路由懒加载
3、用webpack的页面分割,让一个很大的js按照页面的数量分割成好几个小的js做到按需加载。

第十七题:svn和git区别

答:GIT是分布式的,而SVN是集中式的
GIT把内容按元数据方式存储,而SVN是按文件:因为git目录是处于个人机器上的一个克隆版的版本库,它拥有中心版本库上所有的东西,例如标签,分支,版本记录等。​
GIT分支和SVN的分支不同:svn会发生分支遗漏的情况,而git可以同一个工作目录下快速的在几个分支间切换,很容易发现未被合并的分支,简单而快捷的合并这些文件。
GIT没有一个全局的版本号,而SVN有
GIT的内容完整性要优于SVN:GIT的内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性,确保在遇到磁盘故障和网络问题时降低对版本库的破坏
git命令
Git config --global user.name 全局配置用户名
Git config --global user.email 全局配置邮箱账户
Git version 查看当前版本信息
Git int 初始化,建立与托管平台的联系
Git status 查看当前状态
Git add 添加所有的文件
Git commit -m 提交文件 t后面写的是对此次操作的一个说明或者注释
Git push 将代码推送到服务器端
Git pull 将代码从服务器端拉取到本地
Git diff 查看版本之间的冲突
Git branch 查看分之
Git branch 分支名 创建分之
Git branch -d 分支名 删除分之
Git checjout 分支名 切换到指定的分之
Git merge 分之名 将其他的分支上的内容合并到所在的分支上面

第十八题:你是如何解决跨域的?

音频解析:


答:
1、ajax跨域通常都是服务端解决:比如php header("Access-Control-Allow-Origin: *");
2、用fetch获取接口数据可以用CORS解决。
3、jsonp。jsonp的原理是:就是利用<script>标签的src没有跨域限制,来达到与第三方通讯的目的。
4、配置webpack的代理。

第十九题:你用vue封装过的组件吗?

音频解析:


答:封装过:alert、toast、模态框、上拉加载数据等。还有一些页面的组件比如,公共头 。

第二十题:面向对象的继承有哪些?

音频解析:


答:call、apply、bind。

第二十一题:call、apply、bind区别?

音频解析:


答:call只能一个一个的传入参数。apply参数可以传数组。bind方法,他是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定的第一个参数。bind传参方式跟call方法一致。call、apply、bind具体使用


第二十二题:数组的合并?
答:用concat或是三个点扩展运算符。

第二十三题:字符串翻转?
答:先用split将字符串分割成数组,再用reverse()进行翻转

第二十四题:对象合并(浅拷贝)
答:用es6的Object.assign({},{})进行对象合并,如果是数组可以用es6的Array.from,或是es6的扩展运算符...arr,如果使用es5需要用循环来做浅拷贝,如果是深拷贝需要用递归的形式来实现。

第二十五题:原型和原型链?
答:每一个对象都有__proto__即原型。
原型链:由于__proto__是任何对象都有的属性,所以会形成一条__proto__连起来的链条,递归访问__proto__最终到头,并且值是null.

第二十六题:var于let区别
var:存在变量升级,没有作用域
let:有作用域,不支持变量升级。

第二十七题:const里面的值可变吗?
如果是定义基本类型那么这个值是不可变的比如:const name=“张三”,const age=20。定义的是引用类型那么这个值是可以改变的。比如const arr=[0,1,2];arr.push(3)。但是重新赋值是不行的比如:const arr=[0,1,2];arr=[3,4]。

第二十八题:扩展运算符...的使用
1、数组合并。2复制数组。3.结构赋值。

第二十九题:元素居中
css 居中
方法1:table-cell

html结构:
<div class="box box1">
        <span>垂直居中</span>
</div>
css:
.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;       
}


方法2:display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}
方法3:绝对定位和负边距
.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }
方法4:绝对定位和0
.box4 span{
  width: 50%;
  height: 50%;
  background: #000;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。
不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

方法5:translate

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
这实际上是方法3的变形,移位是通过translate来实现的。

方法6:display:inline-block
.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
这种方法确实巧妙...通过:after来占位。

方法7:display:flex和margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}
方法8:display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}

第三十题:vue路由的钩子函数(导航守卫)

1、 beforeEach:每次每一个路由改变的时候都得执行一遍。一般用来做会员权限(是否登录可以访问页面)
2、 afterEach:你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身
3、 beforeRouteEnter:在渲染该组件的对应路由被 confirm 前调用。不!能!获取组件实例 `this`。因为当守卫执行前,组件实例还没被创建。
4、 beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用。举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 `this`。
5、 beforeRouteLeave:导航离开该组件的对应路由时调用,可以访问组件实例 `this`。

第三十一题:Vue的性能优化

1、 路由懒加载。
2、 使用webpack的require.ensure进行页面切割build之后会按照页面生成相应的js文件做到按需加载。
3、 使用keep-alive做页面缓存,多次访问相同的页面不会重新渲染数据和获取dom,如果想多次获取数据比如动态路获取数据需要传参展示不同的数据,那么需要使用钩子函数activated来解决缓存问题。
4、在做v-for加一个:key这样就触发了diff算法,支持了虚拟dom。

第三十二题:从用户输入网址到页面渲染完执行了什么?

1.浏览器查找域名的IP地址。
2. 浏览器给web服务器发送一个HTTP请求
3. 网站服务的永久重定向响应
4. 浏览器跟踪重定向地址 现在,浏览器知道了要访问的正确地址,所以它会发送另一个获取请求。
5. 服务器“处理”请求,服务器接收到获取请求,然后处理并返回一个响应。
6. 服务器发回一个HTML响应
7. 浏览器开始显示HTML
8. 浏览器发送请求,以获取嵌入在HTML中的对象。在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等;

第三十三题:js的执行机制?

1、 JS是单线程语言
2、 JS的Event Loop是JS的执行机制
Event loop:
(1)、首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table
(2)、异步任务在event table中注册函数,当满足触发条件后,被推入event queue
(3)、同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
以上三步循环执行,这就是event loop
 
第三十四题:localstorage、sessionstorage和cookies的区别?
答:
localstorage
生命周期:除非数据被清除,否则一直存在。
存放大小:5M
与服务器通信:数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信
易用性:可以用源生接口,也可再次封装来对Object和Array有更好的支持
 
sessionstorage
生命周期:页面会话期间可用。
存放大小:5M
与服务器通信:数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信。
易用性:可以用源生接口,也可再次封装来对Object和Array有更好的支持。
 
cookies
生命周期:生成时就会被指定一个maxAge值,这就是cookie的生存周期,在这个周期内cookie有效,默认关闭浏览器失效。
存放大小:4K左右(因为每次http请求都会携带cookie)。
与服务器通信:由对服务器的请求来传递,每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。
易用性:cookie需要自己封装setCookie,getCookie。
 
共同点:都是保存在浏览器端,和服务器端的session机制不同。

第三十五题:微信支付流程

答:
1、订购完成后会生成一个订单编号,我用ajax将订单编号传递给后台的微信支付统一下单接口。
 
2、后台人员使用微信支付统一下单接口将公众号id(appId)、时间戳(timeStamp)、随机字符串(nonceStr)、订单详情扩展字符串(package)、签名(paySign)传递给我。
 
3、我用ajax接收传过来的参数,调用微信h5API接口,完成微信支付。
 
第三十六题:什么是作用域?

作用域就是可访问变量,对象,函数的集合。比如咱们在做程序的时候每个函数都有大括号,每个大括号都是一个作用域,比如函数里面有一个变量,那么这个变量就是属于这个函数的,函数外部是不能访问的。如果强制访问会报错。
 
第三十七题:VUE、react、angular的区别

答:vue:是目前最流行、最有前途的前端框架之一,模板式开发效率高,速度快,生态圈强大,app方面有阿里的weex配合,微信小程序可以使用mpvue配合,扩展性强、兼容性好,新版本可向下兼容,从商业角度来看,比较好招人,开发速度快节约成本。缺点:由于是模板式开发报错不是很清晰,调试起来有些繁琐。
react:公认最强的前端框架,不过以后会不会被vue超过可能只是时间的问题,模块式开发,报错信息清晰,好调试,就这一个特点就可用于大型项目。生态圈强大:开发app有react  native,开发VR有React VR。目前银行系统大部分都采用react-dva。有强大的后台facebook支持,从商业角度来看,不太好招人,工资高。
angular:最早的前端框架,由于版本更新太快,而且每个版本不能很好的兼容,现在市场使用率很低,大部分angular都在重新开放并使用vue或react,typeScript是他的一大特点适合大型项目的开发,但是增加了学习成本,不太好招人。

第三十八题:箭头函数

1.es5的function函数在运行时绑定到this函数,箭头函数在定义时初始化绑定this。
2.由于this已经被绑定在词法层面,通过call()或apply()方法调用函数只是传入参数,对此没有影响。
3.箭头函数不绑定arguments,解决办法使用扩展运算符。
4.箭头函数不能用作构造函数,和 new 一起用就会抛出错误
5.箭头函数没有原型属性。

更多关于箭头函数与普通函数的区别

第三十九题:解构赋值

我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。
在ES5中

let options = {
    repeat: true,
    save: false
};
// 从对象中提取数据
let repeat = options.repeat,
save = options.save;


用ES6结构的方式:

let options = {
    repeat: true,
    save: false
};
let {repeat,save}=options
console.log(repeat) //true
console.log(save) //false


第四十题:扩展运算符

功能是把数组或类数组对象展开成一系列用逗号隔开的值,用于数组的合并和拷贝,也可以解决箭头函数没有arguments的问题。

第四十一题:vue如何解决刷新或者加载出现闪烁(显示变量)

用v-cloak解决。具体解决方法:

<div class="#app">
    <p>{{value.name}}</p>
</div>
在加载的时候会看到

{{value.name}}
在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak
那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>
而且,在css里面要添加
[v-cloak] {
    display: none;
}
这样就可以防止页面闪烁了。

但是有的时候会不起作用,可能的原因有二:

1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级

[v-cloak] {
    display: none !important;
}

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中

第四十二题:语义化标签的好处

点击查看语义化标签的好处

第四十三题:git常用命令

音频解析:



进入到本地项目目录

下载:git clone  git@118.190.206.71:/var/git/xsyg

上传:

1、(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库

git init

2、把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点“.”,意为添加文件夹下的所有文件

git add .

git add 的几种参数区别

git add -A 保存所有的修改 
git add . 保存新的添加和修改,但是不包括删除 
git add -u 保存修改和删除,但是不包括新建文件。
自定义添加多个文件: git add file_1 file_2 file_3

3、用命令 git commit告诉Git,把文件提交到仓库。引号内为提交说明

git commit -m 'first commit'

4、关联到远程库

git remote add origin 你的远程库地址

如:
git remote add origin git@118.190.206.71:/var/git/xsyg

5、获取远程库与本地同步合并(如果远程库不为空必须做这一步,否则后面的提交会失败)

git pull --rebase origin master

6、把本地库的内容推送到远程,使用 git push命令,实际上是把当前分支master推送到远程。执行此命令后会要求输入用户名、密码,验证通过后即开始上传。

git push -u origin master

*、状态查询命令

git status

git删除远程分支文件

把不需要版本控制的文件提交到远程分支上后,需要删除远程分支上的文件,用以下操作即可:
git rm -r –cached dirname //删除远程文件夹,但保留本地文件夹 dirname换成.代码删除所有文件
git commit -m ‘say something’ //提交操作,并添加描述
git push origin master //推送

当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用

git rm file_path //file_path换成.代码删除所有文件

当我们需要删除暂存区或分支上的文件, 但本地又需要使用, 只是不希望这个文件被版本控制, 可以使用

git rm –cached file_path //file_path换成.代码删除所有文件

第四十四题:说说http协议

http(Hypertext transfer protocol)是超文本传输协议,通过浏览器和服务器进行数据交互,进行超文本(html)(文本、图片、视频等)传输。常用的方法有get、post,web就是通过浏览器基于http协议进行传输,我们前端编写的网站页面通过浏览器将内容展示给用户,那么这个传输的协议就是http协议。

http协议

第四十五题:vue里面的data必须是一个函数吗?为什么?

data必须是一个函数,如果data是一个对象每个组件的data都是引用类型,一个数据改变了其他也改变了;data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。

第四十六题:单页面(spa)与多页面(MPA)的区别

点击查看单页面(spa)与多页面(MPA)的区别

第四十七题:pc端和移动端兼容问题如何解决


第四十八题:购物车开发流程


第四十九题:会员登录注册流程


第五十题:DOM加载顺序

1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.构造HTML DOM模型。
5.加载图片等外部文件。
6.页面加载完毕。

第五十一题:html5新增标签

1、语义化标签比如:artice、nav、header、footer等、video、audio、canvas、websocket等。

第五十二题:iphoneX如何适配的

1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
设置viewport-fit为cover

2、当我们设置viewport-fit:cover时:设置如下

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px           
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0               
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0               
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px      
}

详细说明:H5页面解决iPhoneX适配刘海问题

第五十三题:es6新增特性

1、扩展运算符(...):数组合并、对象合并。

2、promise:解决回调地域,异步操作同步执行。

3、Object.assign:对象合并实现浅拷贝

4、set:数组去重

5、解构赋值

6、let,const

7、箭头函数

8、模块化import和export


第五十四题:v-if true和false变换,生命周期会重新渲染

初始渲染

初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。
初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

切换

false => true
依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false
依次执行 beforeDestroy,destroyed 钩子。

v-show

渲染

无论初始状态,组件都会渲染,依次执行created,beforeMount,mounted 钩子,v-show 的渲染是非惰性的。

切换

对生命周期钩子无影响,切换时组件始终保持在 mounted 钩子。

第五十五题:说一下常用的服务器状态码

答:服务器状态码详解(注:背标红的即可)

第五十六题:vue修饰符还有哪些?

答:查看vue修饰符

------------------------------------------------------------------------------------------------------------------------------------------------------

点击进入Javascript相关面试题

点击进入React高频面试题,值得珍藏!
精品好课
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
收藏
扫一扫关注我们