面试题
1、vue的特点是什么?
- 国人开发的一个轻量级框架。
- 双向数据绑定,在数据操作方面更为简单。
- 视图、数据、结构分离,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
- 组件化,方便封装和复用
- 虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作
2、vue中父子组件是如何传值的?
下面链接描述的详细
父传子
- 父组件在引用子组件时,通过属性绑定(v-bind:)也可以缩写为(:),把需要传递给子组件的数据,传递到子组件内部,供子组件使用。
- 在子组件里面定义一个props来存储父组件给子组件的值,子组件中的props只能读不能写,props是一个数组,数组里面值的命名要和上面属性绑定的名字一致。
- 在子组件中就可以使用props里面的数据了
子传父
使用监听的方式
在子组件中,利用$emit触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件
3、v-show和v-if指令的共同点和不同点?
共同点:都能控制元素的显示和隐藏。
不通电:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销较大)
4、说出几种vue当中的指令和它的用法?
v-model双向数据绑定;v-for循环;v-if v-show显示与隐藏;v-on事件;v-once只绑定一次。
5、vue-loader是什么?使用它的用途有哪些?
vue文件的一个加载器,将template/js/style转换成js模块。
用途:js可以写es6、style样式可以scss或less、template可以加jade
6、axios是什么?怎么使用?
axios是请求后台资源的模块。
npm install axios --save装好,js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。
7、单页面应用和多页面应用区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载必须的 html、js、css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后再交互的时候由路由程序动态载入。
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。
单页面的优点:用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的转场动画)。
单页面缺点:不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览)
8、简述一下 vue 常用的修饰符和作用?
.stop:等同于JavaScript中的event.stopPropagation(),放置事件冒泡;
.prevent:等同于JavaScript中的even.preventDefault(),放置执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture:与事件冒泡的方向相反,事件捕获由内到外;
.self:只会触发自己范围内的事件,不包含子元素;
.once:只会触发一次。
9、谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
- Model:代表数据模型,数据和业务逻辑都在Model层中定义;
- View:代表UI视图,负责数据的展示;
- ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;
Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作。
10、前端如何优化网站性能?
-
减少 HTTP 请求数量
在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
可以通过精灵图、合并css和js文件。懒加载等方式来减少http请求。
CSS Sprites
国内俗称CSS精灵图,这是将多张图合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并CSS和JS文件
现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少HTTP请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用 lazyLoad
俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
-
控制资源文件加载优先级
浏览器在加载HTML内容时,是将HTML内容从上至下一次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受JS加载影响。
一半情况下都是CSS在头部,JS在底部
-
利用浏览器缓存
浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。
-
减少 DOM 操作(vue这种减少操作DOM)
-
图标使用 IconFont 替换 image 标签
11、vue中样式绑定语法
1、对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2、数组方法v-bind:class="[class1,class2]"
3、行内v-bind:style="{color:color,fontSize+'px'}"
12、简述vue中每个生命周期具体适合哪些场景?(重要,查资料)
beforeCreate:在new
一个vue
实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate
生命周期执行的时候,data和methods
中的数据都还没有初始化。不能再这个阶段使用data
中的数据和methods
中的方法
create:data
和methods
都已经被初始化好了,如果要调用methods
中的方法操作data
中的数据,最早可以再这个阶段中操作
beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂在到页面中,此时,页面还是旧的。
mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点,最早可以再和这个阶段中进行
beforeUpdate:当执行这个钩子时,页面中的显示的数据还是旧的,data
中的数据是更新后的,页面还没有和最新的数据保持同步
updated:页面显示的数据和data
中的数据已经保持同步了,都是最新的
beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的data
和methods
,指令,过滤器…都是处于可用状态。还没有真正被销毁
destroyed:这个时候上所有的data
和methods
,指令,过滤器…都是处于不可用状态。组件已经被销毁了。
13、如何避免回调地狱?
- 模块化:将回调函数转换为独立的函数
- 使用流程控制库,例如[aync]
- 使用Promise
- 使用aync/await
14、使用NPM有哪些好处?
- 通过NPM,你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
- 对于Node应用开发而言,你可以通过
package.json
文件来管理项目信息,配置脚本,以及指明依赖的具体版本 npm install xx -S
和npm install -D
的命令含义npm uninstall xx
是什么意思- 项目转换的时候,不会把
node_modules
包发过去,那么你拿到没有nodeModules目录的项目怎么让它跑起来(你怕吗 install 安装所有的依赖)
15、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack
IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:
// 1、条件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性Hack
.test{
color:#090; /* For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE7 and earlier */
}
// 3、选择符Hack
*html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
16、如何消除一个数组里面重复的元素?
var arr1 = [1,2,2,2,3,3,3,4,5,6],
var arr2 = [];
for(var i = 0,len = arr1.length;i<len;i++){
if(arr2.indexOf(arr1[i])<0{
arr2.push(arr1[i])
})
}
document.write(arr2); // 1,2,3,4,5,6
17、写一个function,清除字符串前后的空格。(兼容所有浏览器)
function trim(str){
if(str&typeof str === "string"){
return str.reqlace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
18、一次完整的HTTP事务是怎样的一个过程?
基本流程:
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器端响应http请求,浏览器得到html代码
- 浏览器解析html代码,并请求http代码中的资源
- 浏览器对页面进行渲染呈现给用户
19、页面跳转
methods:{
logout(){
window.localStorage.clear()
this.$router.push('/login')
}
}
20、说一下自己常用的es6的功能
此题是一道开放题,可以自由回答。但要注意像
let
这种简单的用法就别说了,说一些经常用到并有一定高度的新功能
像module
、class
、promise
等,尽量讲的详细一点。
21、link和@import的区别
两者都是外部引用 CSS 的方式,但是存在一定的区别:
- link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
- link是XHTML标签,无需兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用JavaScript控制DOM改变样式;而@import不支持
22、请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie 数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到5M或更大。
有效时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
23、路由如何使用
import Vue from 'vue'
// 路由
import VueRouter from 'vue-router'
// 下面导入的是 Login 目录下的 index.vue,index.vue 可以省略
// 登录页面
import Login from '../views/Login'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children:[
{
path: '/users',
name: 'Users',
component: Users
},
{
path: '/roles',
24、npm install常用的-S.-D、-g有什么区别?
npm i module_name -S 即 npm install module_name --save写入dependencies,发布到生产环境
npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies,发布到开
发环境
npm i module_name -g 即 global全局安装(命令行使用)
npm i module_name 即 本地安装(将安装包放在./node_modules下)
注:使用npm install(简写npm i) ---->使用cnpm更快!
25、npm命令
- npm install 安装模块
- npm uninstall 卸载模块
- npm update 更新模块
- npm outdated 检查模块是否已经过时
- npm ls 查看安装的模块
- npm init 在项目中引导创建一个package.json文件
- npm help 查看某条命令的详细帮助
- npm root 查看包的安装路径
- npm config 管理npm的配置路径
- npm cache 管理模块的缓存
- npm start 启动模块
- npm stop 停止模块
- npm restart 重新启动模块
- npm test 测试模块
- npm version 查看模块版本
- npm view 查看模块的注册信息
- npm adduser 用户登录
- npm publish 发布模块
- npm access 在发布的包上设置访问级别
- npm package.json的语法
26、es6一些特性
26.1 let属性
ES6 新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
//简单说明就是let是局部作用域里面使用,var全局使用
for
循环的计数器,就很合适使用let
命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
上面代码中,计数器i
只在for
循环体内有效,在循环体外引用就会报错。
下面的代码如果使用var
,最后输出的是10
。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代码中,变量i
是var
命令声明的,在全局范围内都有效,所以全局只有一个变量i
。每一次循环,变量i
的值都会发生改变,而循环内被赋给数组a
的函数内部的console.log(i)
,里面的i
指向的就是全局的i
。也就是说,所有数组a
的成员里面的i
,指向的都是同一个i
,导致运行时输出的是最后一轮的i
的值,也就是 10。
如果使用let
,声明的变量仅在块级作用域内有效,最后输出的是 6。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
26.2、cont属性
基本用法
const
声明一个只读的常量。一旦声明,常量的值就不能改变。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
上面代码表明改变常量的值会报错。
const
声明的变量不得改变值,这意味着,const
一旦声明变量,就必须立即初始化,不能留到以后赋值。
const foo;
// SyntaxError: Missing initializer in const declaration
上面代码表示,对于const
来说,只声明不赋值,就会报错。
const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
const
命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
上面代码在常量MAX
声明之前就调用,结果报错。
const
声明的常量,也与let
一样不可重复声明。
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
26.3、函数的扩展
26.4、对象扩展
26.4、promise
26.5、asvnc
27、使用js递归的方式写1到100求和
<script>
function add(num1, num2) { //定义一个函数传入两个参数
var num = num1 + num2 //定义一个变量num来接收两数相加的和
if (num2 + 1 > 100) { //这里判断传入参数num2的值是否大于100,
return num; //这里如果大于100的话就直接返回num的值,结束程序
} else {
return add(num, num2 + 1) //如果不大于100就把add函数在甩出去,就再次执行这个函数,一直到大于100之后停止
}
}
var sum = add(1, 2)
console.log(sum)
</script>
//自我理解首先定义一个
28、jquery面试题
1、jquery库中的$()是什么?
简单来说:就是jquery的缩写
详细来说:$()函数用于将任何对象包裹成jquery对象,然后我们就可以调用定义在jquery对象上多个不同的方法
比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如: $("a").click(function(){...})
就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用<a/>这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。
自我理解:$("#id")=document.getElementById(“id”)
2、如何找到所有HTML select标签的选中项?
<select name="n_select" class="c_select" id="i_select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected >4</option>
<option value="5">5</option>
</select>
jq部分:
$('[name=n_select] :selected');
3、$(this)和this关键字在jQuery中有何不同?
$(this)返回一个jQuery对象,你可以对它调用多个jQuery方法,比如用text()获取文本,用val()获取值等等。
$(this).val()//这里就是获取你当前jq对象里面的val的值
this代表当前元素,它是JavaScript 关键词中的一个,表示上下文中的当前DOM元素。你不能对它调用jQuery方法,直到它被$()函数包裹,例如$(this)。
4、jquery怎么移除标签onclick属性?
jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的onclick属性,对应的:
增加事件
$(选择器).attr(属性名) 它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值
如
设置onclick属性:$("a").attr("onclick","test();");
删除事件
$(selector).removeAttr(attribute)
例
删除onclick属性:$("a").removeAttr("onclick");