Vue面试题

一、关于vue2的生命周期函数

1.1 生命周期函数

函数	描述
beforeCreate	组件实例被创建之前
create	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例之后
beforeUpdate	组件数据发生变化,更新之前
updated	组件数据更新之后
beforedestory	组件实例销毁之前
destoryed	组件实例销毁之后
activated	keep-alive 缓存组件激活时调用
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用
	dom 以及 data 什么时候出现 console.log(this. e l , t h i s . el,this. el,this.data)
	子组件和父组件生命周期函数出现时期

1.2 问题

1.如何在created中获取dom

答:只需异步操作即可 setTimeout,this.$nextTick(()=>{}),
Promise()

2.为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?

答:如果请求是在methods封装好了,在beforeCreate调用的时候,
beforeCreate阶段是拿不到methods里的方法的(会报错)

3.发送请求是在created里还是mounted里

答：具体要看项目和业务的情况:因为组件的加载顺序是:父组件引入了子组
件,那么先执行父的前3个生命周期,再执行子的前4个生命周期,那么如果我
们的业务是父组件引入子组件,那么在父组件中当前的请求要放在mounted中，
如果当前组件没有依赖关系那么放在created或者mouted生命周期请求都
是可以的。

5.keep-alive的作用:

答:如果当前组件加入了keep-alive 第二次或者第N次加入组件只会执行
activated函数

6.说一说你在项目中最常用的生命周期函数。

created:单组件请求
mounted:同步可以获取dom吗，如果先子组件请求后父组件请求
activated:判断id是否相等,如果不同发起请求
destoryed:关闭视频记录播放历史初始化的时候从上一次的的历史开始播放

二、关于组件

2.1组件的通信方式

父传子: 
  1.给子组件绑定属性的方式 ，子组件通过props来接收。 
  这种方式父传子很方便，但是父穿给孙组件就很麻烦了(父->子 子->孙) 
  这种方式子组件不能直接修改父组件的数据
  
  2.通过this.$parent.xxx使用父组件的数据,可以直接修改父组件的数据
  
  3.依赖注入:父组件可以直接想后代的任一组件传参 ,不用一级一级传递 兄弟之间不行
  父:
	  provide(){
	  return{
	  val1:"这是依赖内容"
	  }
	  后代:
	  inject['val1']
 
子传父：
1.emit
	子组件:定义自定义事件:this.$emit('事件名',参数)
	父组件:给子组件绑定属性  @事件名="方法"
2.ref
	给子组件绑定ref属性 ref='名称'
	<son  ref="child"/>
	父组件通过this.$refs.名称
	this.$refs.child
	可直接修改子组件的属性
	this.$refs.child.xxx = ...

平辈之间的传值:通过bus.js中转来做
urilts/bus.js
	import Vue from 'vue'
	export default new Vue()
其他组件引入bus
通过bus.$emit('事件名',参数)和bus.$on('事件名',参数)来传值

2.2如何找到跟组件

this.$parent:找到当前组件的父组件,找不到返回自身
this.$root:找到根组件

2.3 slot

1.匿名插槽

2.具名插槽
	<slot name="名">
	<template v-slot:名> 简写:<template #:名>

3.作用域插槽(用来传值)
传:
	把要传递的值绑定给<slot :arr='arr' />
接:
	具名插槽:
	<template #footer='arr'/>
	匿名插槽:
	<template #default='arr' />
	#是v-slot的缩写

2.4组件的封装

组件一定要难点 ,涉及的知识点:slot ,组件通信

三、关于vuex

一、访问state中的属性（存放全局共享的属性）
	1.this.$store.state.xxx
	2.import {mapState} from 'vuex'
	computed:{
	...mapState(['str'])
	}
	区别:第一种可以直接修改state 辅助函数mapState 不能
二、访问gatters中的属性（存放计算属性）
	1.this.$getters.str
	2.computed:{
	...mapGetters(['str'])
	}
三、mutations（存放同步方法的）
四、actions （存放异步方法 提交mutations）
	返回Promise 可以执行异步操
五、modules（把vuex再次进行模块之间的划分）

二、vuex的持久化存储
	1.使用插件
	yarn add vuex-persistedstate
	npm install --save vuex-persistedstate
	2.配置
	@/store/index.js
	import createPersistedState from 'vuex-persistedstate'
	import Vuex from 'vuex'
	import Vue from 'vue'
	Vue.use(Vuex)
	const store = new Vuex.Store({
	  state: {},
	  mutations: {},
	  actions: {},
	  plugins: [
	    createPersistedState({
	      storage: window.sessionStorage,
	      key: 'store',
	      render(state) {
	        return { ...state }
	      },
	    }),
	  ],
	})
	export default store

四、关于路由

路由模式: history , hash
区别:
	1.关于找不到当前页码发送请求的问题:
		history会给后端发送一次请求 造成服务器的压力
		hash不会
	2.关于项目打包前端自测问题
		hash是可以看到内容的而history是不行的
	3.关于表象不同 
		url中hash是有#，history无

路由故障:当前页跳当前页	
官方解决方法:https://router.vuejs.org/zh/guide/advanced/navigation-failures.html


$router和$route的区别:
	$router包含当前路由和整个路由的属性和方法
	$route包含当前路由对象

路由守卫：三个参数 (to,from,next)
1.全局守卫
	beforEach 路由进入之前
	afterEach 路由进入之后
2.路由独享守卫（√）
	brforeEnter 路由进入之前
3.组件内守卫
	beforeRouterEnter 路由进入之前
	beforeRouterUpdate 路由更新之前
	beforeRouterLeave 路由离开之前

五、关于API

$set
	this.$set(target,key,'修改后的值')    响应式
	
$nextTick :异步操作

$refs :来获取domde 

$el ::获取当前组件的根节点的

$data: 获取当前组件的数据的

$children :获取当前组件的所有子组件的

$parent 获取当前组件的父组件 如果没有则返回自身

$root 根组件


data数据定义:
return 内和外的区别：
	return内的数据是可以修改的
	return外的数据是不能修改的

computed的两种写法:
写法一:
	computed:{
		str(){
		return xxx
		}
	}
写法二:
computed:{
	get(){
		return xxx
	}
	set(val){
		this.str=val
	}
}
区别:写法二是可以修改计算属性的

写法1:
watch:{
	str(newVal,oldVal){
	console.log(newVal,oldVal)
	}
}
写法2(立即执行)
watch:{
	str:{	
		handler(newVal,oldVal){
		console.log(newVal,oldVal)
		},
		immediate:true //初始化时立即执行
	}
}
写法3(深度监听):
obj:{
	handler(newVal,oldVal){
	console.log('obj',newVal,oldVal)
	}
	deep:true  //开启深度监听
}

computed和methods的区别
computed是有缓存机制的methods是没有缓存机制的,调用几次执行几次

六、关于指令

1.注册指令

全局:
main.js

import Vue from 'vue'
Vue.directive('focus',{  //focus是指令名  v-focus
	inserted(el){   //el是挂载的元素
	el.focus()
	操作...
	}
})

局部:
组件中
directive:{
	focus:{
	inserted(el){
	el.focus()}
	}
}

2.数据绑定

双向:v-model
单向:v-bind: 简写:

3.v-if和v-for的优先级

vue3中:v-if>v-for
vue2中:v-for>v-if

7.关于原理

7.1 $nextTick原理

$nextTick功能:获取更新后的dom

$nextTick(callback){
	return Promise.esolve().then(()=>{
	callback()
	}
}

八、关于源码

8.1. 关于数据解析

8.2 关于生命周期

8.3 关于事件

九、Vue2和Vue3的区别

9.1 Vue2和Vue3双向绑定的方法不同

1. Vue2和Vue3双向绑定 方法不同
2. Vue2:Objext.defineProperty()
3. 后期添加的属性是劫持不到的
4. Vue3: new Proxy() 即使后添加的也可以劫持到
5. 了解Objec t.defineProperty()和Proxy()的写法
6. this.$set在vue3中没有 ，因为Proxy不需要
7. v-if和v-for的优先级不同了
8. $ref和$children也不同
9. Vue2是选项式API Vue3可以向下兼容选项式也可以用组合式
10.Vue3 hooks hooks(就是函数式)，主要让功能模块细分(提升项目的维护性),解决script中的代码乱的问题 

9.2 Vue3中常见API

1.createApp() ==>创建一个应用实例
	//main.js
	import {crreateApp} from 'vue'
	import App from './App.vue'
	import router from './router'
	import stroe from './store'
	const app = createApp(App)
	app.use(router)
	app.use(store)
	app.mount('#app')
2.provide/inject ==>依赖注入
//祖先组件
provide('key',data)
//后代组价
const injectedData  =inject('key')
3.directive 自定义指令
4.mixin 全局混入 局部
5.app.config.globalProperties
获取vue这个全局对象的属性和方法
可以添加属性或者方法到全局中
6.nextTick
等待下一次DOM更新刷新的工具方法,nextTick返回一个Promise,回调函数是防在Promise中,所以是异步执行的
7.computed
计算属性 有缓存
8.reactive ref
定义动态数据 ref可以定义普通类型的
9.watch
监听 Vue3自动深度监听
10.markRaw()
不被new Proxy代理,说白了就是静态数据
11.defineProps()
接收父组件传递的值,子组件使用setup形式,需要用defineProps接收
12.defineEmits()
用法:
import {defineEmits} from 'vue';
const emit = defineEmits(['customEvent'])
const handleClick = ()=>{
emit('customEvent','参数')
}
在这个实例中声明了一个名为customEvent的事件,然后使用返回的emit函数来触发这个事件
在父组件中监听事件
<ChildComponent @customEvent="handleCustomEvent" />
const handleCustomEvent = (message)=>{
console.log(message)
}
13.slot
匿名 具名 作用域

Vue3的常见响应式数据类型
ref,reactive,toRef,toRefs

ref:用于创建一个响应式引用可以是任何类型的

reactive:用于创建一个深度响应式的对象,适用于复杂数据结构

toRef:用于从响应式对象中创建一个单个属性的引用

toRefs:用于将响应式对象的每个属性转换为ref

teleport组件
是体格传送门
假如自己写弹出框,需要在页面居中位置展示,不受当前组件的限制,可以把盒子传送到body中