前端面试准备——day04

1 闭包

能够访问其他函数作用域中的对象的函数，称之为闭包

可用于封装私有变量、防抖和节流

2 图片懒加载

scrollTop+innerHeight>=offsetTop

3 获取页面中所有不重复的元素

let map={}
    let res=[]
    var node=[...document.querySelectorAll('*')]
    var tagNames=node.map(item=>{
      return item.tagName
    })
    tagNames.forEach(item => {
      if(map[item]){
        map[item]+=1
      }else{
        map[item]=1
      }
    });
    for(let v in map){
      if(map[v]===1){
        res.push(v)
      }
    }
    console.log(res);

4 vue2的生命周期

beforeCreate、Created、beforeMount、Mounted、beforeUpdate、Updated、beforeDestory、destoryed

（1）进入页面会触发哪些生命周期
beforeCreate、Created、beforeMount、Mounted

（2）在哪个阶段有$el(组件的根节点)和$data(组件的data数据)

• beforeCreate：data和methods中的数据还没有渲染完成
• create：data、methods中数据渲染完成，可以调用
• beforeMount：模板在内存中被编译，没有在界面显示，变量尚未替换
• mount：实例完全创建，DOM渲染完成
• beforeUpdate：当data发生变化时会触发，data数据尚未和最新的数据同步
• Updated：界面与data数据保持一致
• beforeDestory：data、methods中数据处于不可用状态，但还没有销毁
• destoryed：销毁

（3）加入keep-alive会多两个生命周期

• activated：进入页面触发
• deactivated：离开页面触发

第一次进入组件和第二次进入组件会执行哪些生命周期？
第二次进入由于组件已经缓存了，所以只会执行activated

5 谈谈对keep-alive的了解

用于缓存组件，提升项目的性能

6 v-if和v-show的区别

v-show：元素仍存在DOM当中，只是css样式改变
v-if：创建一个DOM节点

7 v-if和v-for的优先级

v-for的优先级要高于v-if

8 nextTick是什么

用于获取更新后的DOM内容

解释：当更新DOM元素值后，直接获取DOM节点更新数据可能获取不到，使用this.$nextTick将回调延迟到下次DOM更新循环之前

9 scoped原理

样式仅在本组件适用

10 样式穿透

在使用对全局引入样式做局部更改时，即使用scoped样式无法生效，这是要使用父元素 /deep/ 子元素

11 组件的通信

（1）父子组件通信

//父组件
<div :msg='msg'/>

//子组件
props:{
	msg:String
}

（2）子父组件通信

//子组件
this.$emit(事件名称，值)

//父组件
@事件名称

（3）兄弟组件通信(事件总线)

//发生
bus.$emit(事件名称，数据)
//接收
bus.$on(事件名称，(data)=>{
	this.msg=data	
})

12 computed、methods、watch的区别

（1）computed和methods的区别
computed计算属性是基于它们的响应式依赖进行缓存的，即如果调用方法的值没有改变，所以只会执行一次

methods中的方法，调用多次会执行多次

（2）computed和watch的区别
watch是监听数据或路由改变才会响应
computed可以计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回

13 props和data优先级哪个高

props->methods->data->computed->watch

14 vuex状态管理模式

(1) State
用于存放数据
(2) Getters
类似于computed，即具有缓存
(3) Mutations
用于存放方法改变数据
(4) Actions
Action提交的是mutation，而不是直接变更状态
(5) Modules
将以上4个属性再次细分

15 vuex持久化存储

使用localStorage或使用vuex-persist插件

16 vue设置代理

如果前端应用和后端服务器没有运行在同一个主机上，需要在开发环境下将API请求代理到服务器，可以通过vue.config.js中配置devServer.proxy解决

module.exports={
	devServer:{
		proxy:  //跨域请求的Url
	}
}

Vue项目出现空白页是如何解决的？为什么出现空白页？
引入路径为'/'需要改成'./',在vue.config.js中配置公共路径如下：

module.export={
	publicPath:'./',
	devServer:{
		proxy:  //跨域请求的Url
	}
}
//自己测试的话路由模式需要改成hash模式
//项目上线需求为history模式，使用重定向解决

这时仍没有获取到数据，路径仍出现问题，vue-cli中的模式和环境变量可以解决这个问题

//开发环境:.env.development
//生产环境:.env.production
//配置三个值
VUE_APP_TILE='生产环境'

VUE_APP_ENV='pro/dev'

VUE_APP_BASE_API='htp://localhost:3000'

//于是在获取baseURL时需要判断是开发环境还是生产环境
$axios(options){
	let url=null
	if(process.env.VUE_APP_ENV=='dev'){
		url=options.url
	}else{
		url=process.env.VUE_APP_ENV+options.url
	}
	return axios({
		url:url	
	})
}