新知一下
海量新知
5 8 9 4 3 9 3

经常会被问及的 Vue 面试题(上)

前端达人 | 专注分享当下最实用的前端技术, 2021/10/14 22:25

0.前言

原文有 36 道 vue 常用面试题,考虑到太多一次也看不完,所以分为 上、中、下 三篇,如果你能读完这三篇文章,相信你在面试中 vue 的问题你不会怕了。

1.页面中定义一个定时器,在哪个阶段清除?

答案:在 beforeDestroy 中销毁定时器。

① 为什么销毁它:

在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。

② 解决方案 1:

mounted(){

this.timer = setInterval(()=>{

console.log(1)

},1000)

},

beforeDestroy(){

clearInterval(this.timer)

}

方案 1 有两点不好的地方,引用尤大的话来说就是:

它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。

我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。

方案 2(推荐):该方法是通过$once 这个事件侦听器在定义完定时器之后的位置来清除定时器

mounted(){

const timer = setInterval(()=>{

console.log(1)

},1000)

this.$once('hook:beforeDestroy',()=>{

clearInterval(timer)

})

}

官网参考链接:https://cn.vuejs.org/v2/guide/components-edge-cases.html 新知达人, 经常会被问及的 Vue 面试题(上) 新知达人, 经常会被问及的 Vue 面试题(上)

2.父组件如何获取子组件的数据,子组件如何获取父组件的数据,父子组件如何传值?

① 先说,父组件如何主动获取子组件的数据?

方案 1:$children

$children 用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是数组。

现在,我们定义 Header,HelloWorld 两个组件

<template>

<div class="index">

<Header></Header>

<HelloWorld :message="message"></HelloWorld>

<button @click="goPro">跳转</button>

</div>

</template>

mounted(){

console.log(this.$children)

}

新知达人, 经常会被问及的 Vue 面试题(上) 新知达人, 经常会被问及的 Vue 面试题(上) 打印的是一个数组,可以用 foreach 分别得到所需要的的数据

缺点:

无法确定子组件的顺序,也不是响应式的。如果你确切的知道要访问子组件建议使用$refs。

方案 2 :$refs

<HelloWorld ref="hello" :message="message"></HelloWorld>

调用 helloworld 子组件的时候直接定义一个 ref,这样就可以通过 this.$refs 获取所需要的的数据。

this.$refs.hello.属性

this.$refs.hello.方法

② 子组件如何主动获取父组件中的数据?

通过 :$parent

访

children 类似

this.$parent.属性

this.$parent.方法

父子组件通信除了以上三种,还有 props 和 attrs

③inheritAttrs

这是@2.4 新增的属性和接口。inheritAttrs 属性控制子组件 html 属性上是否显示父组件的提供的属性。

如果我们将父组件 Index 中的属性 desc、keysword、message 三个数据传递到子组件 HelloWorld 中的话,如下

父组件 Index 部分

<HelloWorld ref="hello" :desc="desc" :keysword="keysword" :message="message"></HelloWorld>

子组件:HelloWorld,props 中只接受了 message

props: {

message: String

},

实际情况,我们只需要 message,那其他两个属性则会被当做普通的 html 元素插在子组件的根元素上。

如图 新知达人, 经常会被问及的 Vue 面试题(上) 新知达人, 经常会被问及的 Vue 面试题(上) 这样做会使组件预期功能变得模糊不清,这个时候,在子组件中写入,inheritAttrs:false ,这些没用到的属性便会被去掉,true 的话,就会显示。

如果,父组件中没被需要的属性,跟子组件本来的属性冲突的时候,则依据父组件

<HelloWorld ref="hello" type="text" :message="message"></HelloWorld>

子组件:HelloWorld

<template>

<input type="number">

</template>

这个时候父组件中 type=“text”,而子组件中 type=”number”,而实际中最后显示的是 type=”text”,这并不是我们想要的,所以只要设置:inheritAttrs:false,type 便会成为 number 新知达人, 经常会被问及的 Vue 面试题(上) 新知达人, 经常会被问及的 Vue 面试题(上) 上述这些没被用到的属性,如何被获取呢?这就用到了$attrs

③$attrs

作用:可以获取到没有使用的注册属性,如果需要,我们在这也可以往下继续传递。

就上上述没有被用到的 desc 和 keysword 就能通过$attrs 获取到。

通过$attrs 的这个特性可以父组件传递到孙组件,免除父组件传递到子组件,再从子组件传递到孙组件的麻烦

代码如下 父组件 Index 部分

<div class="index">

<HelloWorld ref="hello" :desc="desc" :keysword="keysword" :message="message"></HelloWorld>

</div>

data(){

return{

message:'首页',

desc:'首页描述',

keysword:'我是关键词key'

}

},

子组件 HelloWorld 部分

<div class="hello">

<sunzi v-bind="$attrs"></sunzi>

<button @click="aa">获取父组件的数据</button>

</div>

孙子组件 sunzi 部分

<template>

<div class="header">

{{$attrs}}

<br>

</div>

</template>

可以看出通过 v-bind=”$attrs”将数据传到孙组件中

除了以上,provide / inject 也适用于 隔代组件通信,尤其是获取祖先组件的数据,非常方便。 新知达人, 经常会被问及的 Vue 面试题(上) 新知达人, 经常会被问及的 Vue 面试题(上) 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是 provide / inject 要干的事情。

<template>

<div>

<childOne></childOne>

</div>

</template>

<script>

import childOne from '../components/test/ChildOne'

export default {

name: "Parent",

provide: {

for: "demo"

},

components:{

childOne

}

}

在这里我们在父组件中 provide for 这个变量,然后直接设置三个组件(childOne、childTwo 、childThird)并且一层层不断内嵌其中, 而在最深层的 childThird 组件中我们可以通过 inject 获取 for 这个变量

<template>

<div>

{{demo}}

</div>

</template>

<script>

export default {

name: "",

inject: ['for'],

data() {

return {

demo: this.for

}

}

}

</script>

3.自定义指令如何定义,它的生命周期是什么?

通过 Vue.directive() 来定义全局指令

有几个可用的钩子(生命周期), 每个钩子可以选择一些参数. 钩子如下:

bind: 一旦指令附加到元素时触发

inserted: 一旦元素被添加到父元素时触发

update: 每当元素本身更新(但是子元素还未更新)时触发

componentUpdate: 每当组件和子组件被更新时触发

unbind: 一旦指令被移除时触发。

bind 和 update 也许是这五个里面最有用的两个钩子了

每个钩子都有 el, binding, 和 vnode 参数可用.

update 和 componentUpdated 钩子还暴露了 oldVnode, 以区分传递的旧值和较新的值.

el 就是所绑定的元素.

binding 是一个保护传入钩子的参数的对象. 有很多可用的参数, 包括 name, value, oldValue, expression, arguments, arg 及修饰语.

vnode 有一个更不寻常的用例, 它可用于你需要直接引用到虚拟 DOM 中的节点.

binding 和 vnode 都应该被视为只读.

现在,自定义一个指令,添加一些样式,表示定位的距离

Vue.directive('tack',{

bind(el,binding){

el.style.position='fixed';

el.style.top=binding.value + 'px'

}

})

<div class="header" v-tack="10" >我是header</div>

假设我们想要区分从顶部或者左侧偏移 70px, 我们可以通过传递一个参数来做到这一点

Vue.directive('tack', {

bind(el, binding, vnode) {

el.style.position = 'fixed';

const s = (binding.arg === 'left' ? 'left' : 'top');

el.style[s] = binding.value + 'px';

}

})

也可以同时传入不止一个值

Vue.directive('tack', {

bind(el, binding, vnode) {

el.style.position = 'fixed';

el.style.top = binding.value.top + 'px';

el.style.left = binding.value.left + 'px';

}

})

<div class="header" v-tack="{left:’20’,top:’20’}" >我是header</div>

4、vue 生命周期,各个阶段简单讲一下?

breforeCreate():实例创建前,这个阶段实例的 data 和 methods 是读不到的。

created():实例创建后,这个阶段已经完成数据观测,属性和方法的运算,watch/event 事件回调,mount 挂载阶段还没有开始。$el 属性目前不可见,数据并没有在 DOM 元素上进行渲染。

created 完成之后,进行 template 编译等操作,将 template 编译为 render 函数,有了 render 函数后才会执行 beforeMount()

beforeMount():在挂载开始之前被调用:相关的 render 函数首次被调用

mounted():挂载之后调用,el 选项的 DOM 节点被新创建的 vm.$el 替换,并挂载到实例上去之后调用此生命周期函数,此时实例的数据在 DOM 节点上进行渲染

后续的钩子函数执行的过程都是需要外部的触发才会执行

有数据的变化,会调用 beforeUpdate,然后经过 Virtual Dom,最后 updated 更新完毕,当组件被销毁的时候,会调用 beforeDestory,以及 destoryed。

5、watch 和 computed 的区别?

computed:

① 有缓存机制;② 不能接受参数;③ 可以依赖其他 computed,甚至是其他组件的 data;④ 不能与 data 中的属性重复

watch:

① 可接受两个参数;② 监听时可触发一个回调,并做一些事情;③ 监听的属性必须是存在的;④ 允许异步

watch 配置:handler、deep(是否深度)、immeditate (是否立即执行)

总结:

当有一些数据需要随着另外一些数据变化时,建议使用 computed

当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用 watch

6、请说一下 computed 中的 getter 和 setter

① computed 中可以分成 getter(读取) 和 setter(设值)

② 一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。

一、默认只有 getter 的写法

<div id="demo">{{ fullName }}</div>

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar'

},

computed: {

fullName: function () {

return this.firstName + ' ' + this.lastName

}

}

})

//其实fullName的完整写法应该是如下:

fullName: {

get(){

return this.firstName + ' ' + this.lastName

}

}

注意:不是说我们更改了 getter 里使用的变量,就会触发 computed 的更新,前提是 computed 里的值必须要在模板里使用才行。如果将{{fullName}}去掉,get()方法是不会触发的。

二、setter 的写法,可以设值

<template>

<div id="demo">

<p> {{ fullName }} </p>

<input type="text" v-model="fullName">

<input type="text" v-model="firstName">

<input type="text" v-model="lastName">

</div>

</template>

var vm = new Vue({

el: '#demo',

data: {

firstName: 'zhang',

lastName: 'san'

},

computed: {

fullName: {

//getter 方法

get(){

console.log('computed getter...')

return this.firstName + ' ' + this.lastName

},

//setter 方法

set(newValue){

console.log('computed setter...')

var names = newValue.split(' ')

this.firstName = names[0]

this.lastName = names[names.length - 1]

return this.firstName + ' ' + this.lastName

}

}

}

})

在这里,我们修改 fullName 的值,就会触发 setter,同时也会触发 getter。

注意:并不是触发了 setter 也就会触发 getter,他们两个是相互独立的。我们这里修改了 fullName 会触发 getter 是因为 setter 函数里有改变 firstName 和 lastName 值的代码,这两个值改变了,fullName 依赖于这两个值,所以便会自动改变。

7、导航钩子有哪几种,分别如何用,如何将数据传入下一个点击的路由页面?

① 全局导航守卫

前置守卫

router.beforeEach((to, from, next) => {

// do someting

});

后置钩子(没有 next 参数)

router.afterEach((to, from) => {

// do someting

});

② 路由独享守卫

cont router = new VueRouter({

routes: [

{

path: '/file',

component: File,

beforeEnter: (to, from ,next) => {

// do someting

}

}

]

});

顺便看一下路由里面的参数配置: 新知达人, 经常会被问及的 Vue 面试题(上)

③ 组件内的导航钩子

组件内的导航钩子主要有这三种:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

beforeRouteEnter

data(){

return{

pro:'产品'

}

},

beforeRouteEnter:(to,from,next)=>{

console.log(to)

next(vm => {

console.log(vm.pro)

})

}

注:beforeRouteEnter 不能获取组件实例 this,因为当守卫执行前,组件实例被没有被创建出来,我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认时,会执行这个回调,这时就可以访问组件实例了

仅仅是 beforRouteEnter 支持给 next 传递回调,其他两个并不支持,因为剩下两个钩子可以正常获取组件实例 this

如何通过路由将数据传入下一个跳转的页面呢?

答:params 和 query

params

传参

this.$router.push({

name:"detail",

params:{

name:'xiaoming',

}

});

接受

this.$route.params.name

query

传参

this.$router.push({

path:'/detail',

query:{

name:"xiaoming"

}

})

接受 //接收参数是this.$route

this.$route.query.id

那 query 和 params 什么区别呢?

① params 只能用 name 来引入路由,query 既可以用 name 又可以用 path(通常用 path)

② params 类似于 post 方法,参数不会再地址栏中显示 新知达人, 经常会被问及的 Vue 面试题(上) query 类似于 get 请求,页面跳转的时候,可以在地址栏看到请求参数 新知达人, 经常会被问及的 Vue 面试题(上) 那刚才提到的 this.

route 有何区别?

先打印出来看一下 新知达人, 经常会被问及的 Vue 面试题(上)  router.push 方法

$route 为当前 router 跳转对象,里面可以获取 name、path、query、params 等

8、es6 的特有的类型, 常用的操作数组的方法都有哪些?

es6 新增的主要的特性:

① let const 两者都有块级作用域

② 箭头函数

③ 模板字符串

④ 解构赋值

⑤ for of 循环

⑥ import 、export 导入导出

⑦ set 数据结构

⑧ ...展开运算符

⑨ 修饰器 @

⑩ class 类继承

⑪ async、await

⑫ promise

⑬ Symbol

⑭ Proxy 代理

操作数组常用的方法:

es5:concat 、join 、push、pop、shift、unshift、slice、splice、substring 和 substr 、sort、 reverse、indexOf 和 lastIndexOf 、every、some、filter、map、forEach、reduce

es6:find、findIndex、fill、copyWithin、Array.from、Array.of、entries、values、key、includes

9、vue 双向绑定原理?

通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

10、vue-router 的实现原理,history 和 hash 模式有什么区别?

vue-router 有两种模式,hash 模式和 history 模式

hash 模式

url 中带有#的便是 hash 模式,#后面是 hash 值,它的变化会触发 hashchange 这个事件。

通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作:

window.onhashchange = function(event){

console.log(event.oldURL, event.newURL);

let hash = location.hash.slice(1);

document.body.style.color = hash;

}

另外,hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。

history 模式

history api 可以分为两大部分,切换和修改

① 切换历史状态

包括 back,forward,go 三个方法,对应浏览器的前进,后退,跳转操作

history.go(-2);//后退两次

history.go(2);//前进两次

history.back(); //后退

hsitory.forward(); //前进

② 修改历史状态

包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){

console.log(event.state)

if(event.state && event.state.color === 'red'){

document.body.style.color = 'red';

}

}

history.back();

history.forward();

通过 pushstate 把页面的状态保存在 state 对象中,当页面的 url 再变回这个 url 时,可以通过 event.state 取到这个 state 对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到 state 的里面。

history 缺点:

1:hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如http://www.a12c.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

2:history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致。如http://www.a12c.com/book/a。如果后端缺少对/book/a 的路由处理,将返回 404 错误

更多“Vue”相关内容

更多“Vue”相关内容

新知精选

更多新知精选