面试题一、请你简述vue的生命周期钩子函数
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, 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函数首次被调用。mountedel被新创建的vm.el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
钩子函数中该干的事情:
created 实例已经创建完成,因为它是最早触发的原因可以进行一些数据,资源的请求。
mounted 实例已经挂载完成,可以进行一些DOM操作。
beforeUpdate 可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
destroyed 可以执行一些优化操作,清空定时器,解除绑定事件。
面试题二、vue组件间通信常用方式
首先明确一点,组件化的好处:方便维护,易于扩展、减少DOM操作。
1、使用props传递参数(属性在组件标签上需要使用短横线命名法,在组件中声明需要采用驼峰命名法;通过带有校验,通过type指明外界传递过来的数据是什么类型,其中,对象和数组类型如果给出默认值时需要返回一个工厂函数)
2、子组件中使用
e
m
i
t
触
发
父
组
件
中
的
方
法
,
通
过
回
调
的
方
式
讲
修
改
的
内
容
传
递
给
父
组
件
3
、
.
s
y
n
c
的
形
式
,
触
发
的
事
件
名
u
p
d
a
t
e
:
(
绑
定
.
s
y
n
c
属
性
的
名
字
)
−
−
属
于
固
定
写
法
<
S
o
n
1
:
m
n
y
.
s
y
n
c
=
"
m
n
y
"
>
<
/
S
o
n
1
>
<
b
u
t
t
o
n
@
c
l
i
c
k
=
"
emit触发父组件中的方法,通过回调的方式讲修改的内容传递给父组件 3、.sync的形式,触发的事件名 update:(绑定.sync属性的名字) --属于固定写法 <Son1 :mny.sync="mny"></Son1> <button @click="
emit触发父组件中的方法,通过回调的方式讲修改的内容传递给父组件3、.sync的形式,触发的事件名update:(绑定.sync属性的名字)−−属于固定写法<Son1:mny.sync="mny"></Son1><button@click="emit(‘update:mny’,200)">更改
4、v-model,子组件触发的事件名称只能是input,接受到的属性名只能叫value
5、使用
p
a
r
e
n
t
、
parent、
parent、children,可以获取到父组件或者子组件中的属性和方法。如果层级很深,就会出现
p
a
r
e
n
t
.
parent.
parent.parent,可以封装一个
d
i
s
p
a
t
c
h
方
法
向
上
进
行
派
发
,
或
者
封
装
一
个
dispatch方法向上进行派发,或者封装一个
dispatch方法向上进行派发,或者封装一个broadcast向下派发
6、
a
t
t
r
s
、
attrs、
attrs、listeners 使用
a
t
t
r
s
属
性
,
可
以
将
属
性
继
续
向
下
传
递
;
使
用
attrs属性,可以将属性继续向下传递;使用
attrs属性,可以将属性继续向下传递;使用listeners将方法继续向下传递
7、Provide和Inject,向任意子组件中可以注入父级数据,使用inject接收到值以后,会将数据挂载在当前实例上
8、使用ref 可以获取组件的实例,实例上的属性和方法随机可以获取到
9、使用eventBus进行跨组件通信
面试题三、简单聊一下Promise
1、可以解决并发问题(可以同步多个异步方法的执行结果)
2、可以解决多个回调嵌套的问题
3、Promise是一个类;
4、每次可以通过new的形式实例化一个实例时都需要传递一个执行器(执行器是立即执行的),执行器函数中有两个参数(resolve、reject,这两个都是方法);
5、默认Promise有三个状态,pendding(请求中),如果调用了resolve方法,表示将请求中的状态转到成功态(fulfilled),如果调用了reject方法,表示将请求中的状态转到失败态(rejected);
6、只有状态是pendding态时,才能更改状态;并且,状态一旦改变,不能更改;
7、每一个promise实例都有一个then方法,then方法里面包含成功的回调和失败的回调
Promise.all 处理多个异步的并发问题(全部完成才算完成,如果有一个失败,就失败)
Promise.race 有一个成功就成功,有一个失败就失败
面试题四、说一下vue中的slot插槽
使用customer组件时,如果没有包含一个元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
直接使用slot元素时也称为默认插槽,如果组件中需要放置多个位置,可以给slot添加name属性,用来定义额外的插槽。
指的一提的是:Vue2.6.0起引入了v-slot,取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute。
子节点数据会存在组件实例中的
s
l
o
t
s
.
d
e
f
a
u
l
t
∗
∗
面
试
题
五
、
v
u
e
中
的
r
e
n
d
e
r
函
数
∗
∗
V
u
e
选
项
中
的
r
e
n
d
e
r
函
数
若
存
在
,
则
V
u
e
构
造
函
数
不
会
从
t
e
m
p
l
a
t
e
选
项
或
通
过
e
l
选
项
指
定
的
挂
载
元
素
中
提
取
出
的
h
t
m
l
模
板
编
译
渲
染
函
数
。
该
渲
染
函
数
接
受
一
个
c
r
e
a
t
e
E
l
e
m
e
n
t
方
法
作
为
第
一
个
参
数
用
来
创
建
V
N
o
d
e
。
虚
拟
D
O
M
:
不
是
一
个
实
际
的
D
O
M
元
素
。
它
更
准
确
的
名
字
可
能
是
c
r
e
a
t
e
N
o
d
e
D
e
s
c
r
i
p
t
i
o
n
,
因
为
它
所
包
含
的
信
息
会
告
诉
V
u
e
页
面
上
需
要
渲
染
什
么
样
的
节
点
,
包
括
及
其
子
节
点
的
描
述
信
息
。
c
r
e
a
t
e
E
l
e
m
e
n
t
参
数
:
一
个
标
签
名
称
(
必
填
项
)
,
一
个
与
模
板
中
属
性
对
应
的
数
据
对
象
(
可
选
)
,
子
级
虚
拟
节
点
,
由
c
r
e
a
t
e
E
l
e
m
e
n
t
构
建
而
成
。
也
可
以
使
用
字
符
串
来
生
成
”
文
本
虚
拟
节
点
“
(
可
选
)
∗
∗
面
试
题
六
、
简
述
一
下
v
u
e
x
∗
∗
v
u
e
x
是
专
为
v
u
e
.
j
s
应
用
程
序
开
发
的
状
态
管
理
模
式
。
每
一
个
V
u
e
x
应
用
的
核
心
就
是
s
t
o
r
e
(
仓
库
)
。
“
s
t
o
r
e
”
基
本
上
就
是
一
个
容
器
,
它
包
含
着
你
的
应
用
中
大
部
分
的
状
态
(
s
t
a
t
e
)
。
1
、
V
u
e
x
的
状
态
存
储
是
响
应
式
的
。
当
V
u
e
组
件
从
s
t
o
r
e
中
读
取
状
态
的
时
候
,
若
s
t
o
r
e
中
的
状
态
发
生
变
化
,
那
么
相
应
的
组
件
也
会
相
应
地
得
到
高
效
更
新
。
2
、
你
不
能
直
接
改
变
s
t
o
r
e
中
的
状
态
。
改
变
s
t
o
r
e
中
的
状
态
的
唯
一
途
径
就
是
显
式
地
提
交
(
c
o
m
m
i
t
)
m
u
t
a
t
i
o
n
。
3
、
A
c
t
i
o
n
提
交
的
是
m
u
t
a
t
i
o
n
,
而
不
是
直
接
变
更
状
态
,
A
c
t
i
o
n
可
以
包
含
任
意
异
步
操
作
4
、
g
e
t
t
e
r
就
像
计
算
属
性
一
样
,
g
e
t
t
e
r
的
返
回
值
会
根
据
它
的
依
赖
被
缓
存
起
来
,
且
只
有
它
的
依
赖
值
发
生
了
变
化
才
会
被
重
新
计
算
∗
∗
面
试
题
七
、
v
u
e
−
r
o
u
t
e
r
有
关
∗
∗
V
u
e
−
r
o
u
t
e
r
是
v
u
e
官
方
的
路
由
管
理
器
。
提
供
了
诸
如
:
h
a
s
h
和
h
i
s
t
o
r
y
两
种
路
由
模
式
。
使
用
该
插
件
时
,
必
须
提
供
一
个
i
n
s
t
a
l
l
方
法
,
并
且
以
V
u
e
作
为
参
数
。
提
供
了
两
个
全
局
组
件
r
o
u
t
e
r
−
l
i
n
k
、
r
o
u
t
e
r
−
v
i
e
w
。
每
个
组
件
中
都
有
slots.default **面试题五、vue中的render函数** Vue选项中的render函数若存在,则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的html模板编译渲染函数。该渲染函数接受一个createElement方法作为第一个参数用来创建 VNode。 虚拟DOM:不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点,包括及其子节点的描述信息。 createElement参数:一个标签名称(必填项),一个与模板中属性对应的数据对象(可选),子级虚拟节点,由createElement构建而成。也可以使用字符串来生成”文本虚拟节点“(可选) **面试题六、简述一下vuex** vuex是专为vue.js应用程序开发的状态管理模式。 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 3、Action 提交的是 mutation,而不是直接变更状态,Action 可以包含任意异步操作 4、getter就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有它的依赖值发生了变化才会被重新计算 **面试题七、vue-router有关** Vue-router是vue官方的路由管理器。 提供了诸如: hash和history两种路由模式。 使用该插件时,必须提供一个install方法,并且以Vue作为参数。 提供了两个全局组件router-link、router-view。 每个组件中都有
slots.default∗∗面试题五、vue中的render函数∗∗Vue选项中的render函数若存在,则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的html模板编译渲染函数。该渲染函数接受一个createElement方法作为第一个参数用来创建VNode。虚拟DOM:不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点,包括及其子节点的描述信息。createElement参数:一个标签名称(必填项),一个与模板中属性对应的数据对象(可选),子级虚拟节点,由createElement构建而成。也可以使用字符串来生成”文本虚拟节点“(可选)∗∗面试题六、简述一下vuex∗∗vuex是专为vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)。1、Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。3、Action提交的是mutation,而不是直接变更状态,Action可以包含任意异步操作4、getter就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有它的依赖值发生了变化才会被重新计算∗∗面试题七、vue−router有关∗∗Vue−router是vue官方的路由管理器。提供了诸如:hash和history两种路由模式。使用该插件时,必须提供一个install方法,并且以Vue作为参数。提供了两个全局组件router−link、router−view。每个组件中都有router和route 这两个属性,前者里面有很多api,后面里面有很多属性
如何实现一个vue-router。后面有代码示例,可以研读。
面试题八、vue中数组是如何监听变化的
vue源码中重写了关于操作数组的七个方法(push、pop、unshift、shift、reverse、sort、splice)
关键代码:
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
[‘push’, ‘pop’, ‘shift’, ‘unshift’,‘reverse’,‘sort’,‘splice’ ].forEach(method => {
proto[method] = (…args) => {
oldProtoMehtods[method].call(this, …args)
}
})
另外,push,unshift,splice这三种添加的操作,还遍历了数组里面每一个元素,如果是对象时,则再次Object.defineProperty添加getter和setter一次。
面试题九、什么是库?什么是框架?什么是声明式?什么是命令式?
1、库是将代码合成一个产品,库是我们调用库里的方法实现自己的功能
2、框架则是为解决一类问题而开发的产品,框架是我们在指定的位置编写好代码,框架帮我们调用
框架和库的最本质的区别在于控制权:you call libs, frameworks call you
3、声明式就是利用数组的方法forEach(我们想要的是循环,内部帮我们去做)
4、自己写for循环就是命令式(命令其按照自己的方式得到结果)
面试题十、watch和computed的区别
watch和computed 内部调用的都是new Watcher
watch:
let vm = new Vue({
el: ‘#app’,
data: { name: ‘heima’ }
});
function initWatch(key,handler){
vm.$watch(key,handler);
}
initWatch(‘name’,function(newValue){
console.log(newValue)
});
vm.name = ‘care’; // 数据变化会执行对应的handler
Computed:
let dirty = true; // 内部有脏值检测系统
function initComputed(key,handler) {
Object.defineProperty(vm, key, {
get() {
if (dirty) { // 取值后会将dirty 变成false
value = handler();
dirty = false;
}
return value
}
})
}
initComputed(‘age’, function () {
console.log(‘取值一次’)
return vm.name
});
console.log(vm.age);
console.log(vm.age);
vm.name = ‘hello’; // 当依赖的值变化 会将dirty重新改成true,保证获取最新值
dirty = true;
console.log(vm.age);
面试常问的vue面试题集锦(一)
最新推荐文章于 2024-03-09 23:37:03 发布