web前端面试题(Vue篇)

本文介绍了一些Vue的一些基础知识，题目来源于2020年8月大厂的面试题，答案由小编自己总结，可以借鉴学习，如有宝贵意见希望留言在评论区，谢谢，下面就直接来分享题目

1.Vue中关于dom问题，分析以下代码的执行结果

<div id="app"> {{name}} </div>	

  var mv = new Vue({
      data: {
        name: 'reai'
      }
    }).$mount('#app')
    mv.name = 'hello reai!'
    console.log(mv.$el.textContent.trim() === 'hello reai!') //false
    console.log(mv.$el.textContent.trim()) // reai
// 原因：在vue中数据渲染过程是异步过程，script标签执行中为同步执行过程，需要在同步执行主线程完后才会去进行数据渲染
//则在mv.name改变和获取mv.$el.textContent.trim()时，数据改变了但是在数据并没有在dom上进行渲染
// 解决办法： 使用nextTick方法在dom进行渲染结束后在进行dom数据获取操作
mv.$nexTick(function() {
console.log(mv.$el.textContent.trim() === 'hello reai!') // true
})

2.介绍Vue中几种vue-router模式，简要分析他们特性

vue-router中常用的两种模式分别为hash模式和history模式
1）hash模式特性
url路径会出现“#”号字符
不向服务器发送http请求，由前端路由处理，无页面刷新
改变会触发hashchange事件

window.onhashchage = function(ev) {
  console.log(ev.oldURL, ev.newURL); // 记住新老地址，实现前进后退
  var hash = location.hash.slice(1) // 去除#号的字符
  // 通过hash值实现无刷新页面改变...
}

2）history模式
整个地址重新加载，可以保存历史记录，方便前进后退
依赖H5中hsitory API和后台配置，没有后台配置的话，页面刷新时会出现404

history API	介绍
history.go(x)	x为正整数前进x步；若x为负整数，则为后退｜x｜步
history.back()	后退一步
hsitory.forward()	前进一步
history.pushState(stateObj,title,url)	向当前浏览器会话的历史堆栈中添加一个状态（state）
histroy.replaceState(stateObj,title,newUrl)	在浏览器会话的历史堆栈中修改状态(state)的url

history.pushState({name: 'reai', '', 'reai.html'})
window.onpopstate = function(event) {
  if(event.state && event.state.name === 'reai'){
    //地址状态在name时，地址跳转到reai.html,并进行处理
  }
}
// 修改当前{name: 'reai'}指向的地址，若当前历史状态还在为name时候，地址转到qq.html
history.replaceState({name: 'reai'}, '', 'qq.html')
// 触发onpopstate事件
history.back()
history.forard()

3.vue中实现缓存处理

在vue中我们常常用Vue 的内置组件keep-alive来缓存不活动的组件实例，keep-alive在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性.
keep-alive原理：
在vue的created钩子被调用时中，将需要缓存的VNode缓存在this.cache中，在render页面渲染过程中，如果VNode的name满足缓存的条件，则将会从this.cache中取出之前缓存的VNode实例进行渲染，Props包括include（字符串或正则，包括缓存的组件）、exclude（字符串或正则，包括的组件都不会被缓存）、max（数值型，表示最多缓存实例组件的个数）。在生命周期周包含两个钩子函数作用于keep-alive，分别为activated（ keep-alive 组件激活时调用，在此可以获取缓存组件中需要的最新更新数据）与 deactivated（keep-alive 组件停用时调用），代码如下：
1）在.vue模板中使用

// 实现 在所有路由中都缓存
<keep-alive>
      <router-view/>
</keep-alive>

// 实现部分缓存 缓存name为a、b、c组件
<keep-alive include="a,b,c">
      <router-view/>
</keep-alive>
// 使用正则表达式实现部分缓存，需使用 v-bind 缓存name为a、b、c组件
<keep-alive :include='/a|b|c/'>
  	  <router-view/>
</keep-alive>	

// 实现部分不缓存 name 为a、b、c的组件
<keep-alive exclude='a,b,c'>
  	  <router-view/>
</keep-alive>

2）在 router中使用

// 在router的index.js中使用
new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: false
      }
    }
    {
      path: '/user',
      name: 'user',
      component: User,
      meta: {
        keepAlive: true
      }
    }
  ]
})

// 在模板中使用 判断keepAlive的状态来实现是否缓存
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>