vue面试题总结
1.vue的特点是什么
1.国人开发的轻量级框架
2.双向数据绑定,在数据操作方面更为简单
3.视图,数据,结构分析,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
4.组件化,方便封装和复用
5.虚拟dom:dom的操作是非常耗费性能的,不再使用原生的dom操作节点,极大释放dom操作
2.vue中父子组件是如何操作的
https://www.cnblogs.com/wzfwaf/p/11280153.html
1、路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系;
2、组件传值-父组件向子组件传值;
第一步:父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用
第二步:把父组件传递过来的数据, 在 props数组 中定义一下:
- 组件中的 所有props 中的数据,都是通过父组件传递给子组件的
- props 中的数据都是只读的,无法重新赋值
第三步:在该子组件中使用props数组 中定义好的数据
3、组件传值-父组件把方法传递给子组件
第一步:父组件向子组件传递方法,使用事件绑定机制 v-on,自定义一个事件属性,传递给子组件
第二步:在子组件中定义一个方法,在方法中,利用 $emit 触发 父组件传递过来的,挂载在当前实例上的事件,还可以传递参数
第三步:在子组件中调用定义的那个方法,就可以触发父组件传递过来的方法了
4、组件传值-子组件通过事件调用向父组件传值
在子组件中,利用 $emit 触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件
5、父子组件之间相互传值
3.v-if和v-show指令的区别
共同点:都能控制元素的显示和隐藏
不同点:本质方法不同
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是什么,怎么使用
请求后台资源的模块
安装
npm install axios --save
js中使用import引入,然后执行.get .post请求,如果成功返回在.then函数中,失败则返回在.catch函数中
7.单页面应用和多页面应用区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入。
优点:
1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
2,前后端分离
3,页面效果会比较炫酷(比如切换页面内容时的专场动画)
缺点:
1,不利于seo
2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
3,初次加载时耗时多
4,页面复杂度提高很多
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新优点:
1.多个页面之间跳转,用户可以清晰的了解整个网站的内容构成;
2.页面结构的分布也不会很拥挤;
3.实现简单,开发成本低;
4.适用于对搜索引擎支持较高,页面跳转较少,数据传递较少的项目中开发。
缺点:
1.页面跳转时,要重新执行css,js等文件,页面片段之间跳转较慢,需要用到页面跨页面传值的几种方法;
2.实现转场动画比较困难。维护成本高。
8.简述vue常用的修饰符和作用
.stop:等同于js中的event.stopPropagation(),防止事件冒泡
.prevent:等同于js中的event.stopDefault(),防止执行预设的行为(如果时间可取消,则取消该事件,而不是停止事件的进一步传播)
.capture:与事件冒泡的方向相反,事件捕获由外到内
.self:只会触发自己范围内的事件,不包含子元素
.once:只会触发一次
10.前端如何优化网站性能
- 减少http请求数量
- 可以通过精灵图,合并css和js文件,懒加载lazyload等方式来减少请求
- 控制资源文件加载优先级
- 利用浏览器缓存
- 减少dom操作
- 图标使用iconfont替换image
11.vue中样式绑定语法
1.对象方法 v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2.数组方法 v-bind:class="[class,class1]"
3.行内 v-bind:style="{color:color,fontSize:fontSize+'px'}"
12.简述vue中每个生命周期具体适合那些场景
- beforeCreate:创建前,此阶段为实例初始化之后,this指向创建的实例,此时的数据观察事件机制都未形成,不能获得DOM节点。
data,computed,watch,methods 上的方法和数据均不能访问。
可以在这加个loading事件。 - created:创建后,此阶段为实例已经创建,完成数据(data、props、computed)的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里,异步请求也适宜在这里调用(请求不宜过多,避免白屏时间太长)。
可以在这里结束loading事件,还做一些初始化,实现函数自执行。
未挂载DOM,若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。 - beforeMount:挂载前,虽然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。 - mounted:挂载,完成创建vm.$el,和双向绑定
完成挂载DOM和渲染,可在mounted钩子函数中对挂载的DOM进行操作。
可在这发起后端请求,拿回数据,配合路由钩子做一些事情。 - beforeUpdate:数据更新前,数据驱动DOM。
在数据更新后虽然没有立即更新数据,但是DOM中的数据会改变,这是vue双向数据绑定的作用。
可在更新前访问现有的DOM,如手动移出添加的事件监听器。 - updated:数据更新后,完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新,可执行依赖的DOM操作。
注意:不要在此函数中操作数据(修改属性),会陷入死循环。 - activated:在使用vue-router时有时需要使用``来缓存组件状态,这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发。 - deactivated:< keep-alive> < /keep-alive>组件被移除时使用。
- beforeDestroy:销毁前,
可做一些删除提示,如:您确定删除xx吗? - destroyed:销毁后,当前组件已被删除,销毁监听事件,组件、事件、子实例也被销毁。
这时组件已经没有了,无法操作里面的任何东西了。
13.scss是什么
预处理css,把css当前函数编写,定义变量,嵌套.
14.如何避免回调函数
模块化:将回调函数转换为独立的函数
使用流程控制库,例如 aync
使用promise
使用 aync await
15.使用npm有什么好处
1.安装和管理项目的依赖,并且能够指明依赖的具体版本号
2.对于node应用开发而言,可以通过package.json文件来管理项目信息,配置脚本,以及指明依赖的 具体版本
3.npm install XX -S(–save) dependencies 会发布到生产环境的
npm install XX -D(–save-dev) devDependencies 里面的插件只用于开发环境,不会发布到生产环境(构建工具webpack)
4.项目转换的时候,不会把node_modules包发过去,拿到没有node_modules的项目时,npm install 安装回来
16.一般来说,针对不同的浏览器写不同的css,就是css Hack
17.消除一个数组里面重复的元素
arr1=[]
var arr2=[1,2,3,4,5,6,6,7,7]
for (var i=0,len=arr2.length;i<len;i++){
if (arr1.indexOf(arr2[i])<0){
arr1.push(arr2[i])
}
}
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
indexof() :在字符串中从前向后定位字符和字符串;所有的返回值都是指在字符串的绝对位置,如为空则为- 1
string test=“asdfjsdfjgkfasdsfsgfhgjgfjgdddd”;
test.indexof(‘d’) =2 //从前向后 定位 d 第一次出现的位置
test.indexof(‘d’,1) =2 //从前向后 定位 d 从第二个字符串开始 即s开始 第一次出现的位置
18.写一个function,清除字符串前后的空格(兼容所有浏览器)
function trim(str){
if (str & typeof str ==="string"){
return str.replace(/(^s*)|(s*)$/g,"")//去除前后空白符
}
}
19.一次完整的http事物是怎样的一个过程
基本流程:
1.域名解析
2.发起tcp的三次握手
3.建立tcp连接后发起http请求
4.服务端响应http请求,浏览器得到html代码
5.浏览器解析html代码,并请求html代码中的资源
6.浏览器对页面进行渲染呈现给用户
20.常用的es6的功能
原生 Promise
用 promise 替代回调地狱
ES5
function printAfterTimeout(string, timeout, done){
setTimeout(function(){
done(string);
}, timeout);
}
printAfterTimeout('Hello ', 2e3, function(result){
console.log(result);
// nested callback
printAfterTimeout(result + ‘Reader’, 2e3, function(result){
console.log(result);
});
});
这个函数接收一个回调,在 done
后执行。我们想要先后执行两次,所以在回调中又一次调用了 printAfterTimeout
。
如果需要 3 或 4 次回调,代码很快就一团糟了。那么用 promise 如何实现呢:
ES6
function printAfterTimeout(string, timeout){
return new Promise((resolve, reject) => {
setTimeout(function(){
resolve(string);
}, timeout);
});
}
printAfterTimeout('Hello ', 2e3).then((result) => {
console.log(result);
return printAfterTimeout(result + ‘Reader’, 2e3);
}).then((result) => {
console.log(result);
});
promise 中可以用 then
在某个函数完成后执行新的代码,而不必再嵌套函数。
箭头函数
ES6 没有移除函数表达式,但是新增了箭头函数。
ES5 中,this
的指向有问题:
ES5
var _this = this; // need to hold a reference
$(’.btn’).click(function(event){
_this.sendData(); // reference outer this
});
$(’.input’).on(‘change’,function(event){
this.sendData(); // reference outer this
}.bind(this)); // bind to outer this
在函数内,需要用临时变量指向 this
或者使用 bind
绑定。ES6 中可以使用箭头函数。
21.link和@import的区别
两者都是外部引用css的方式,但是存在一定的区别
1.link是xhtml标签,除了能够加载css,还可以定义rss等其他事务,而@import属于css范畴,只可以加载css;
2.link引用css时,在页面加载时同时加载;@import需要页面完全载入以后在加载
3.link是XHTML标签,无兼容问题;@import则是在css2.1提出的,低版本的浏览器不支持
4.link支持使用js控制dom改变样式;而@import不支持
22.描述一下 cookie,sessionStorage和localStorage的区别
cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密),cookie数据始终在同源的http请求中携带(即使不需要),在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
存储大小:
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制,但是比cookie大得多,可以达到5M或者更大
有效时间:
localStorage 存储持久数据,浏览器关闭后数据不会丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
23.mvvm模式和mvc的区别是什么?
MVC(Model-View-Controller)
MVVM(Model-View-ViewModel)
他们之间的区别主要是MVC中Controller演变成了MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作带来的问题。MVVM中当和Model频繁发生变化,开发者需要主动更新到View。
24.谈谈你对MVVM开发模式的理解,它适用于哪些场景?
MVVM分为model,view,viewmodel三者
- model:代表数据模型,数据和业务逻辑都在model中定义
- view:代表ui视图,负责数据的展示
- viewmodel:负责监听model中数据的改变并且控制视图的更新,处理用户交互操作
这种模式实现了model和view的数据自动同步,因此开发者只需要专户对数据的维护操作即可,而不需要自己操作dom
在数据操作比较多的场景中,MVVM框架更合适,有助于通过操作数据渲染页面。
25.active-class是哪个组件的属性
vue-router模块的 router-link组件的属性。
26.如何定义vue-router的动态路由
在静态路由名称前面添加冒号,例如:设置id动态路由参数,为路由对象的path属性设置/:id。
27.如何获取传过来的动态参数
在组件中,使用$router对象的 params.id,即 $route.params.id 。
28.V-model是什么?有什么作用?
v- model是 Vue. js中的一条指令,可以实现数据的双向绑定。
29.Vue.js中标签如何绑定事件?
绑定事件有两种方式。
第一种,通过v-on指令, 。
第二种,通过@语法糖,< input@ click= doLog()/>。
30.vuex是什么?如何使用?在哪种功能场景中使用它?
vuex是针对 Vue. js框架实现的状态管理系统。
为了使用vuex,要引入 store,并注入Vue.js组件中,在组件内部即可通过$ ostore访问 store对象。
使用场景包括:在单页应用中,用于组件之间的通信,例如音乐播放、登录状态管理、加入购物车等。
31.导航钩子有哪些?它们有哪些参数?
导航钩子又称导航守卫,又分为全局钩子、单个路由独享钧子和组件级钧子。
全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
单个路由独享钩子有 beforeEnter。
组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它们有以下参数。
to:即将要进入的目标路由对象。
from:当前导航正要离开的路由。
next:一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。
32.请详细说明你对Vue.js生命周期的理解。
总共分为8个阶段,分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
beforeCreate:在实例初始化之后,数据观测者( data observer)和 event/ watcher事件配置之前调用。
created:在实例创建完成后立即调用。在这一步,实例已完成以下的配置:数据观测者,属性和方法的运算, watch/event事件回调。然而,挂载阶段还没开始,
e
l
属
性
目
前
不
可
见
。
b
e
f
o
r
e
M
o
u
n
t
:
在
挂
载
开
始
之
前
调
用
,
相
关
的
r
e
n
d
e
r
函
数
首
次
调
用
。
m
o
u
n
t
e
d
:
e
l
被
新
创
建
的
v
m
.
el属性目前不可见。 beforeMount:在挂载开始之前调用,相关的 render函数首次调用。 mounted: el被新创建的vm.
el属性目前不可见。beforeMount:在挂载开始之前调用,相关的render函数首次调用。mounted:el被新创建的vm.el替换,并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素,当调用 mounted时vm.sel也在文档内。
beforeUpdate:在数据更新时调用,发生在虛拟DOM重新渲染和打补丁之前。
updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩。
beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:在 Vue. js实例销毀后调用。调用后,Vue. js实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
当使用组件的kep- alive功能时,增加以下两个周期。
- activated在keep- alive组件激活时调用;
- deactivated在keep-live组件停用时调用。
33.请说出vue.cli项目的src目录中每个文件夹和文件的用法。
assets文件夹存放静态资源;
components存放组件;
router定义路由相关的配置;
view是视图;
app. vue是一个应用主组件;
main.js是入口文件。
34.在Vue.cli中怎样使用自定义组件?在使用过程中你遇到过哪些问题?
具体步骤如下。
(1)在 components目录中新建组件文件,脚本一定要导出暴露的接口(script一定要export default {})。
(2)在需要用的页面(组件)中导入:
`import indexPage from '@/components/indexPage.vue'`
(3)将导入的组件注入uejs的子组件的 components属性中。
(4)在 template视图view中使用,例如有indexPage命名,使用的时候则index-page。
35.如何让CSS只在当前组件中起作用?
在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用,只需要在Style标签添加Scoped属性,即< style scoped></ style>。
36.如何实现路由嵌套?如何进行页面跳转?
路由嵌套会将其他组件渲染到该组件内,而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转,就要将页面渲染到根组件内,可做如下配置。
new Vue({
el:'#icketang',
router:router,
template:'<router-view></router-view>'
})
首先,实例化根组件,在根组件中定义组件渲染容器。然后,挂载路由,当切换路由时,将会切换整个页面。
37.ref属性有什么作用?
有时候,为了在组件内部可以直接访问组件内部的一些元素,可以定义该属性此时可以在组件内部通过this. $refs属性,更快捷地访问设置ref属性的元素。这是一个原生的DOM元素,要使用原生 DOM API操作它们,例如以下代码。
< div id="icke">
< span ref="msg">有课前端网</span>
< span ref=" otherMsg">专业前端技术学习网校</span>
< /div>
app. $refs.msg.text Content
app. $refs.otherMsg. textContent
38.vue.js是什么
Vue. js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue.js采用自下而上增量开发的设计。Vue.js的核心库只关注视图层,并且容易学习,易于与其他库或已有项目整合。另外, Vue. js完全有能力驱动采用单文件组件以及Vue.js生态系统支持的库开发的复杂单页应用。
Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。
39.请说明组件的作用。
当< keep- alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
< keep-alive>是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。
当在< keep- alive>内切换组件时,它的 activated和 deactivated这两个生命周期钧子函数将会执行。
<keep-alive>
<component :is="view"></component>
</keep-alive >
40.axios是什么,如何使用它?
axios是在vue2.0中用来替换 vue-resource.js插件的一个模块,是一个请求后台的模。
用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范,通过 import关键字将 axios导入,并添加到 Vue. js类的原型中。这样每个组件(包括vue.js实例化对象)都将继承该方法对象。它定义了get、post等方法,可以发送get或者post请求。在then方法中注册成功后的回调函数,通过箭头函数的作用域特征,可以直接访问组件实例化对象,存储返回的数据。
import Vue from ' vue'
import axios from 'axios';
Vue.prototype.$http=axios;
new Vue ({
el:' ickt',
data:{
msg:' '
},
template:'<h1> { { msg } }</h1>',
created:function() {
this.$http.get( 'data.json' )
.then(res => {
this. msg= res .data. data
})
}
})
41.sass是什么?如何在vue中安装和使用?
sass是一种CSS预编译语言安装和使用步骤如下。
(1)用npm安装加载程序( sass-loader、 css-loader等加载程序)。
(2)在 webpack. config. js中配置sass加载程序。
模块
module:{
//加载程序
loaders:[
//加载scss
{
test:/ \ .scss$ /,
loader : 'vue-style-loader!css-loader!sass-loader '
}
]
}
(3)在组件的 style标签中加上lang属性,例如lang=“scss”。
<style type="text/css" lang="scss">
$color:red;
h1 {
color: $color;
}
</style>
42.组件之间的传值
- 父组件通过标签上
:data=data
方式定义传值 - 子组件通过
props
方法接受数据 - 子组件通过
$emit
方法传递参数
参考博文:
43.webpack是什么?
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
44.vue如何实现按需加载配合webpack
设置
webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。
页面不按需加载引入方式:import home from ‘…/…/common/home.vue’
页面按需加载引入方式:
const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))
45.vuex有几种属性
有五种,分别是 State
、 Getter
、Mutation
、Action
、 Module
。
state:
-
Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data。
-
state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。
-
通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。
getter:
getters
可以对State
进行计算操作,它就是Store
的计算属性。- 虽然在组件内也可以做计算属性,但是
getters
可以在多组件之间复用。 - 如果一个状态只在一个组件内使用,可以不用
getters
。
mutation:
Action
类似于 mutation
,不同在于:Action
提交的是 mutation
,而不是直接变更状态;Action
可以包含任意异步操作。
46,不用vuex会带来什么问题?
- 可维护性会下降,想修改数据要维护三个地方;
- 可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
- 增加耦合,大量的上传派发,会让耦合性大大增加,
Vue
用Component
本意就是为了减少耦合,现在这么用,和组件化的初衷相背。
参考博文: