1. vue
⽣命周期
?
1.1
什么是
vue
⽣命周期
?
1.2 vue
⽣命周期都有哪些钩⼦函数
?
这些钩⼦函数如何触发
?
1.3
项⽬开发过程中
,
在⽣命周期⾥⾯都分别做过什么功能
?
1.4
⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么
?
⾯试官您好
,
我先介绍⼀下什么是
vue
的⽣命周期
?
所谓的
vue
⽣命周期就是
vue
实例从创建到销毁的整个过程我们称之为
vue
的
⽣命周期
,
通过
vue
的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作
. vue
⽣命周期常⽤的钩⼦函数⼀共有
8
个
,
分别是创
建前后、挂载前后、更新前后以及销毁前后
.
分别对应的钩⼦函数为
beforeCreate
创建前、
created
创建后、
beforeMount
挂载
前、
mounted
挂载后、
beforeUpdate
更新前、
updated
更新后、
beforeDestory
销毁前、
destoryed
销毁后
,
⻚⾯⼀开始加载的
时候就会触发创建前后和挂载前后的钩⼦函数
,
⽽更新的钩⼦函数需要当我们改变
data
的时候才能触发
,
⽐如 点击按钮
,
执⾏⼀
个⽅法
,
在这个⽅式⾥⾯给
data
⾥⾯属性重新进⾏复制操作
,
这个时候就会更新的钩⼦函数
,
销毁的钩⼦函数必须得当组件进⾏
切换的时候就会进⾏销毁
.
在项⽬开发过程中
,
我经常使⽤到的钩⼦函数有
created,
我们经常在
created
进⾏数据请求
,
或者获取本地存储的数据
,
还有⼀些其
他的操作
.
除了
created
还有
mounted,
我们经常在
mounted
⾥⾯获取
dom
元素
(
有时 候也存在获取不到
dom
元素的情况
,
这个时
候我们⼀般⽤
$nextTick
⽅法来解决
).
以上就是我对⽣命周期的理解
2. vuex
的理解
?
2.1
什么是
vuex?
使⽤
vuex
能够解决什么问题
?
2.2 vuex
的五⼤核⼼是什么
?
2.3
在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法
?
2.4 vuex
的执⾏机制是什么
?
2.5 vuex
的弊端是什么
?
怎么解决
?
⾯试官您好
,
接下来我先给您介绍⼀下什么是
vuex?
所谓的
vuex
其实就是
vue
官⽅给我们提供的⼀个状态管理⼯具
,
通过
vuex
我
们可以组件之间数据共享的问题
. vuex
⼀共有
5
⼤核⼼
,
分别是
state,
⾥⾯保存的是状态
,
也可以理解为是数组
,
接下来是
getters,
他们⽤来获取
state
⾥⾯的状态
,
并且可以对
state
的数据进⾏处理之后在返回
,
有点类似于
vue
的计算属性
,
接下来还有
mutations,
他的作⽤主要是⽤来修改
state
⾥⾯的数据
,
不过在
mutations
⾥⾯只能进⾏同步的操作
,
还有
actions,
这个
actions
也可以去改变
state
的状态
,
不过在
actions
⾥⾯定义的⽅法可以进⾏异步操作
,
最后⼀个是
modules,
如果当我们的项⽬⽐较⼤的时候
,
那么保存
的状态也会增加
,
如果都写到
index.js
⽂件⾥⾯
,
⽂件的内容就会变得特别臃肿
,
后期难以维护
,
所以我们可是使⽤
modules
进⾏模
块化的处理
,
将多个状态抽离到对应
js
⽂件⾥⾯
,
最后在
modules
进⾏合并
,
这样后期就⽅便维护了
.
接下来我在介绍⼀下在组件⾥⾯如何调⽤
vuex
⾥⾯的属性和⽅法
,
如果我们要获取
state
⾥⾯的状态
,
我们可以通过
this.
来进行获取 如果要调用
里面的方法 我们可以通过
来进行调用 如果要调用
里面的方法我们需要使用
store.commit
来触发
,
如果调⽤
actions
⾥⾯的⽅法
,
我们⼀般通过
this.$store.dispacth
来进⾏触发
.
除了这种⽅式以外
,
我们还可以
通过辅助函数的⽅式来进⾏调⽤和触发
(mapState, mapMutation,mapAction, mapGetter)
我在项⽬当中如果要改变
state
的状态
,
我们⼀般是在组件⾥⾯调⽤
this.$store.dispatch
⽅式来触发
actions
⾥⾯的⽅法
,
在
actions
⾥⾯的⽅法通过
commit
来调⽤
mutations
⾥⾯定义的⽅法来改变
state,
同时这也是
vuex
的执⾏机制
不过
vuex
也有⼀些弊端
,
⽐如浏览器刷新的时候
,vuex
的数据会丢失
,
我们⼀般结合本地存储来解决
,
当我们在
mutations
⾥⾯改变
state
的时候在通过
localStorage
或者
sessionStorage
存储到本地
,
然后在
state
的状态的属性值那块写⼀个三元表达式
,
如果本地存
在数据的话则读取本地存储的数据
,
否则就赋值为
null
在项⽬当中我⼀般使⽤
vuex
会保存⽤户信息和
token
以及其他的⼀些状态
.
以上就是我对
vuex
的理解
.
3. vue
路由有⼏种模式
?
有什么区别
?
原理是什么
?(
必问
)
讲解
⾯试官您好
,
接下来我给您介绍⼀下
vue
的路由模式
,vue
的路由模式⼀共有两种
,
分别是哈希和
history.
他们的区别是
hash
模式不
会包含在
http
请求当中
,
并且
hash
不会重新加载⻚⾯
,
⽽使⽤
history
模式的话
,
如果前端的
url
和后端发起请求的
url
不⼀致的话
,
会
报
404
错误
,
所以使⽤
history
模块的话我们需要和后端进⾏配合
.
history
的原理就是利⽤
html5
新增的两个特性⽅法
,
分别是
psuhState
和
replaceState
来完成的
.
以上就是我对
vue
路由模式的理解
.
4. vue
路由守卫
?(
必问
)
讲解⻚⾯权限
⾯试官您好
,
接下来我给您介绍⼀下
vue
路由守卫
,
⾸先呢
,
所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数
,
我们把它称之为
vue
路由守卫
. vue
⼀共给我们提供了三种路由守卫
,
第⼀种全局路由守卫
,
第⼆种是组件内路由守卫
,
第三种路由
独享守卫
,
这个是写在路由⾥⾯
.
不管是全局
,
还是组件以及独享
,
都会有
beforeEach
、
beforeResolve
、
a"erEach
分别表示的意
思路由跳转前会触发的钩⼦函数以及进⼊路由的时候
,
以及进⼊路由之后会触发的钩⼦函数
.
这⼏个钩⼦函数⾥⾯都有⼀个回
调函数
,
这个回调函数⾥⾯会有三个参数
,
分别是
to,from,next,
分别对应的是要进⼊的路由、离开之前的路由
,
以及进⼊写⼀个路
由
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权
.
⽐如
:
当⽤户登录之后
,
我们会把后台返回的
token
以及⽤户信息保存到
vuex
和本地
,
当⻚⾯进⾏跳转的时候
,
我们会在路由守卫⾥⾯获取
vuex
⾥⾯的
token,
如果
token
存在的话
,
我们则使⽤
next
让他进⼊要
跳转的⻚⾯
,
如果
token
不存在的话我们使⽤
next
⽅法让他回到登录⻚
以上就是我对
vue
路由守卫的理解
5. v-if
与
v-show
的区别
?
⾯试官您好
,
接下来我给您介绍⼀下
v-if
和
v-show
的区别
?
⾸先
v-if
和
v-show
都是控制元素的显示与隐藏
,
不过
v-if
控制元素的显
示和隐藏的时候会删除对⽤的
dom
元素
,
当每⼀个显示的时候
,
都会重新创建
dom
和渲染
.
⽽
v-show
则是通过
css
的
display:none
和
display:block
来控制元素的显示与隐藏
. v-if
⽐较耗费性能
,
所以我们涉及到频繁的显示隐藏操作我们建议使⽤
v-show,
如果不
是频繁操作的话
,
我们可以
v-if
在项⽬中我会经常使⽤
v-if
和
v-show,
⽐如我们在搜索功能的时候
,
他有⼀个历史记录
,
这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏
,
这块我就可以使⽤
v-if ,
当然⽤
v-show
也可以
.
以上就是我对
v-if
和
v-show
的理解
.
6. v-for
与
v-if
的优先级那个⾼
?
如果同时使⽤
v-for
和
v-if
怎么解决
?
讲解
v-for
的优先级⾼
.
因为
v-for
的时候我们才开始渲染
dom
元素
,
这个
v-if
还⽆法进⾏判断
.
v-for
和
v-if
不能同时使⽤
,
我们可以通过标签
,
⽐如
div
或者
template
标签来进⾏包裹
,
把
v-if
写到包裹的标签上⾯
(
写到
v-for
外⾯
)
7. methods
、
computed
和
watch
的区别
?
。讲解
⾸先呢
,methods
是⽤来定义⽅法的区域
,methods
定义的⽅法需要调⽤才能触发
.
不具备缓存⾏
⽽
computed
是计算属性
,
他依赖于属性值的变化
,
当属性发⽣改变的时候
,
计算属性⾥⾯定义的⽅法就会触发
,computed
具有缓
存性
,
依赖属性值的变化⽽变化
.
⽽
watch
主要是⽤于监听
,
不具备被缓存性
.
依赖于数据变化⽽触发
.
在项⽬中
,
⽐如我们获取
state
的状态的时候我们会把它放到
computed
⾥⾯
,
或者在写购物⻋数量计算的时候也会使⽤计算属性
.
⽽
watch
也在项⽬经常使⽤
,
⽐如我们封装编辑 和 新增弹窗组件的时候会通过
watch
来进⾏
id
判断我们要显否要清空表单的数
据
.
以上就是我对
computed
和
watch
的理解
.
8. vue
组件通信
?
。
eventBus
讲解
⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过
props
来进⾏接受
,
可以通过数组的⽅式进⾏接受
,
也可以通过对象的⽅式来进
⾏接收
,
如果⽗组件没有传递属性
,
⼦组件可以
default
来设置默认值
⼦传⽗ ⼦组件通过
this.$emit("
⾃定义的事件
",
要传给⽗组件的数据
),
⽗组件通过⼦组件的标签监听⾃定义的时间
,
通过⽅法来
接收传递的数据
⾮⽗⼦组件通信
通过中央事件总线
,
我们也称之为
eventBus,
我们需要创建⼀个空的
js
⽂件
,
在这个⽂件⾥⾯创建空的
vue
实例
,
然后导出这个空的
vue
实例
,
通过实例对象调⽤
.on
⽅法进⾏接
收
,
通过
emit
⽅法来进⾏发送
,
以上就是⾮⽗⼦组件通信的⽅式
9. $nextTick
⽅法有什么作⽤?
⾸先呢
,
也叫做异步更新队列方法 而
方法的主要作用就是等待
元素加载完毕之后才会执行的回调函数 我们经常会在
nextTick
⽅法⾥⾯获取
dom
元素
10.
说⼀下什么是
mvvm
模式
?
MVVM
是把
MVC
的
Controller
和
MVP
的
Presenter
改成了
ViewModel
。
View
的变化会⾃动更新到
ViewModel
,
ViewModel
的变化也会⾃动同步到
View
上显示。这种⾃动
同步是因为
ViewModel
中的属性实现了
Observer
,当属性变更时都能触发对应的操作
11. vue
双向数据绑定原理
vue.js
则是采⽤ 数据劫持 结合 发布者
-
订阅者 模式的⽅式,
通过
Object.defineProperty()
来劫持各个属性的
setter
,
getter
,
在数据变动时发布消息给订阅者,触发相应的监听回调。
这个时候就可以实现数据的双向绑定
12. vue
常⽤的指令有哪些
?
v-if
v-show
v-html
v-text
v-on
v-bind
v-model
v-for
13. vue
常⽤的修饰符有哪些
?
.trim
去除⾸尾多余的空格
.stop
阻⽌事件冒泡
.once
只渲染⼀次
.self
事件只作⽤在元素本身
.number
将值转化为
number
类型
.capter
组件之间捕获
.prevent
阻⽌元素的默认⾏为
.native
事件穿透
,
让我们可以在⾃定义组件上定义事件和⽅法
14. vue
如何封装可复⽤的组件
?
以及请举例说明你封装过的组件
?
1.
分析项⽬的所有⻚⾯结构和业务功能
,
抽离出相同的⻚⾯结构和业务功能
2.
在
src
⽬录下创建⼀个
components
这个的⽂件夹
3.
在这个⽂件夹内创建可复⽤的组件
4.
在需要的⽤的组件⾥⾯引⼊创建的这个可复⽤的组件
,
并进⾏注册
,
以标签的形式写在对应的地⽅
5.
接下来就需要对可复⽤的组件内容要进⾏封装
,
那么在封装的时候我们要注意组件的封闭性和开放性以及粗细粒度
6.
所谓的这个封闭性就是当我们在组件内部定义好之后外部是⽆法进⾏修改的
,
⽐如当前有⼀个关闭的符号
,
或者有⼀个箭
头
,
我们需要不管任何⼈使⽤该组件时候都能够显示这个箭头
,
⽆法从外部进⾏修改
7.
所谓的开放性就是我们需要将动态的内容以及组件通信的⽅式进⾏数据传递
,
保证组件的可扩展性
8.
⽽所谓的粗细⼒度就是我们可以把⼀整个⻚⾯当作⼀个组件去进⾏封装
,
也可以⼀个⻚⾯包含了多个组件
,
⾄于到底选择
哪种呢
,
这个是没有⼀个标准的
,
我们需要根据⾃⼰的业务需求去进⾏判断
9.
总结来说
,
所谓的如何封装可复⽤组件其实技术核⼼就是通过我们
vue
提供的组件通信在结合
slot
插槽来进⾏分装
10.
⽐如
:
封装⼀个搜索框组件
:
1.
在
components
⾥⾯创建
search.vue
2.
在
search.vue
⾥⾯实现搜索框的布局
3.
在
props
⾥⾯接受
title, bgColor, size , icon,
以及当点击搜索按钮或者点击回⻋键的时候
,
触发⼀个⽅法
,
通过
this.$emit
将输⼊框输⼊的值传递给⽗组件
4.
接下来要使⽤这个搜索组件
,
我们需要通过
import
在⽗组件内引⼊⼦组件
,
并在
componetns
属性⾥⾯进⾏注册
,
5.
在⻚⾯就可以使⽤
,
这个时候我们可以通过传递
titile
⽼控制⼦组件搜索框显示的内容
,
通过
bgcolor
可以控制搜索框
的背景颜⾊
,
也可以通过
size
设置搜索框字体的⼤⼩
,
也可以通过
icon
来设置搜索框的图标
,
通过监听
$emit
⾥⾯定义
的⽅法来获取搜索框输⼊的值
以上就是封装的过程
15. vue
中
key
的作⽤是什么
?
避免
dom
元素重复渲染
.
我⻔⼀般在设置
key
的时候⾸先尽量会设置为
id,
或者
index
下表
.
16.
说⼀下你对
keep-alive
的理解
?
以及在项⽬中如何使⽤
?
keep-alive
是
vue
内置的⼀个组件,⽽这个组件的作⽤就是能够缓存不活动的组件,我们能够知道,⼀般情况下,组件进⾏切
换的时候,默认会进⾏销毁,如果有需求,某个组件切换后不进⾏销毁,⽽是保存之前的状态,⽐如说刚刚填好的表单数
据。那么就可以利⽤
keep-alive
来实现
在搭建
vue
项⽬时,有某些路由组件没必要多次渲染,所以需要将组件在内存中进⾏
‘
持久化
’
,此时在
router-view
上使⽤
keep-alive
。
keep-alive
可以使被包含的路由组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下
⼀次显示时,也不会重新渲染。
include -
字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude -
字符串或正则表达式。任何名称匹配的组件都不会
被缓存。
max-
数字最多可以缓存多少组件。
以上就是我对
keep-alive
的理解
17.
说⼀下什么是
vue
过滤器
?
有⼏种
?
项⽬中如何使⽤
,
请举例说明
?
所谓的
vue
过滤器就是将数据进⾏⼆次处理
,
得到我们想要的结果数据
vue
的过滤器分为两种
,
第⼀种是全局过滤器
,
通过
vue.filet
来进⾏定义
,
第⼆种是局部过滤器
,
需要定义在组件内部
项⽬中我们通过过滤器将后台返回的状态
0
和
1
转化为⽀付或者未⽀付
18.
说⼀下你对
slot
插槽的理解
?
⾸先呢
,
所谓的插槽就是⼀个占位符
,
将⾃定义组件的内容展示出来
.
我们知道⾃定义的组件⾥⾯如果写内容的话
,
⻚⾯是不会显
示出来的
,
如果我们想让⾃定义组件⾥⾯的内容显示出来
,
我们就需要使⽤
slot
的插槽
.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽
.
我们⽤的⽐较多的具名插槽和匿名插槽
,
具名插槽需要所有
slot
标签上指定
name
属性
,
⽽在对应标签上添加
v-slot
属性
.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽
,
以上就是我对插槽的理解
.
19.
说⼀下
vue
中本地跨域如何解决
?
线上跨域如何解决
?
本地跨域是通过在
vue.config.js
⽂件⾥⾯的
devServer
属性⾥⾯的
proxy
属性⾥⾯配置
,
⼀共配置三个属性
,
分别是代理名称 代理
地址 开启跨域 重写路径
线上跨域是在
nginx.conf
⽂件⾥⾯配置
,
代理名称是通过
location
代理名称。
proxy_pass
代理地址
20.
说⼀下如何对
axios
进⾏⼆次封装
?
以及
api
如何封装
?
1.
在
src
⽂件夹内创建
utils
⽂件夹
2.
在
utils
⽂件夹内创建
request.js
⽂件
3.
在
request.js
内引⼊
axios
4.
使⽤
axios.create
⽅法创建
axios
的实例
,
在
axios.create
⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置
5.
在创建请求拦截器和响应拦截器
6.
在请求拦截器⾥⾯可以获取
vuex
的
token,
并通过
config.header.token = vuex
的
token,
将
token
发送给后台
7.
在请求拦截器⾥⾯我们配置
loading
加载
8.
在响应拦截器⾥⾯我们可以结束
loading
加载以及
token
的过期处理
,
以及错误响应信息的处理
9.
最后通过
export default
导出
axios
的实例对象
10.
在
src
⽂件内创建
api
⽂件夹
11.
在
api
⽂件夹内创建对应模块的
js
⽂件
12.
在对应的⽂件⾥⾯引⼊
request.js
⽂件
13.
封装
api
⽅法
14.
最后通过
export default
导出封装的
api
⽅法
21.
说⼀下
axios
的拦截器的作⽤
?
应⽤场景都有哪些
?
⾸先呢
,axios
拦截器是
axios
给我们提供的两个⽅法
,
通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处
理
(
拦截
).
这两个拦截器不需要⼿动触发
,
只要发送
http
请求的时候就会⾃动触发
.
我在项⽬中经常通过拦截器发送
token,
对
token
进⾏过期处理
,
以及进⾏其他的⼀些操作
22.
说⼀下
vue
和
jquery
的区别
?
⾸先呢
jquery
他是⽤
js
封装的⼀个类库
,
主要是为了⽅便操作
dom
元素
,
⽽
vue
他是⼀个框架
,
并且呢
,
他会从真实
dom
构建出⼀个
虚拟的
dom
树
,
通过
di!
算法渲染只发⽣改变的
dom
元素
,
其他的相同的
dom
元素不⽤在重新渲染
.
⽽使⽤
jquery
去改变
dom
元素
的时候
,
即使有相同的
dom
元素也会重新渲染
,
以上就是我对
vue
和
jquery
区别的理解
.
23. vue
中
data
发⽣变化
,
视图不更新如何解决
?(
必问
)
过⼀下
⾯试官
,
您好
,
接下来我先给您介绍⼀下为什么
data
发⽣变化
,
视图不更新
,
因为
Vue
实例中的数据是响应式的
*
*
⽽我们新增的属
性并不是响应式的,由于受现在
JavaScript
的限制,
Vue
⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。
**
所以我在项⽬中遇到这类问题的时候⼀般是通过
this.
方法去解决
$set
⽅法⼀共有三个参数
,
分别是⽬前属性
,
新增属性
,
新增的值
.
以上就是我对视图不更新的理解
.
24.
为什么
vue
中
data
必须是⼀个函数
?(
必问
)
过⼀下
如果
data
是⼀个函数的话,这样每复⽤⼀次组件,就会返回⼀份新的
data
,类似于给每个组件实例创建⼀个私有的数据空
间,让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式,就使得所有组件实例共⽤了⼀份
data
,就会造成⼀个变了全
都会变的结果。
所以说
vue
组件的
data
必须是函数。这都是因为
js
的特性带来的,跟
vue
本身设计⽆关。
25.MVVM
模式的优点以及与
MVC
模式的区别
?
MVVM
模式的优点:
1
、低耦合:
视图(
View
)可以独⽴于
Model
变化和修改,⼀个
ViewModel
可以绑定到不同的
"View"
上,当
View
变化的时候
Model
可以不变,当
Model
变化的时候
View
也可以不变。
2
、可重⽤性:
你可以把⼀些视图逻辑放在⼀个
ViewModel
⾥⾯,让很多
view
重⽤这段视图逻辑。
3
、独⽴开发:
开发⼈员可以专注于业务逻辑和数据的开发(
ViewModel
),设计⼈员可以专注于⻚⾯设计。
4
、可测试:
界⾯素来是⽐较难于测试的,⽽现在测试可以针对
ViewModel
来写。
MVVM
和
MVC
的区别:
mvc
和
mvvm
其实区别并不⼤。都是⼀种设计思想。
主要区别
mvc
中
Controller
演变成
mvvm
中的
viewModel
,
mvvm
通过数据来显示视图层⽽不是节点操作。
mvvm
主要解决了
:
mvc
中⼤量的
DOM
操作使⻚⾯渲染性能降低,加载速度变慢,影响⽤户体验。
26.
怎样理解
Vue
的单向数据流
?
数据总是从⽗组件传到⼦组件,⼦组件没有权利修改⽗组件传过来的数据,只能请求⽗组件对原始数据进⾏修改。这样会防⽌从
⼦组件意外改变⽗级组件的状态,从⽽导致你的应⽤的数据流向难以理解。
注意:在⼦组件直接⽤
v-model
绑定⽗组件传过来的
prop
这样是不规范的写法 开发环境会报警告
如果实在要改变⽗组件的
prop
值 可以再
data
⾥⾯定义⼀个变量 并⽤
prop
的值初始化它 之后⽤
$emit
通知⽗组件去修改
27.
虚拟
DOM
是什么
?
有什么优缺点
?
什么是虚拟
dom?
由于在浏览器中操作
DOM
是很昂贵的。频繁的操作
DOM
,会产⽣⼀定的性能问题
.
所以在
vue
中将真实的
DOM
节点抽离成⼀个虚拟
的
DOM
树
,
这个虚拟的
DOM
树就是虚拟
DOM.
优点
:
保证性能下限:
框架的虚拟
DOM
需要适配任何上层
API
可能产⽣的操作,它的⼀些
DOM
操作的实现必须是普适的,所以它
的性能并不是最优的;但是⽐起粗暴的
DOM
操作性能要好很多,因此框架的虚拟
DOM
⾄少可以保证在你不需要⼿动优化的
情况下,依然可以提供还不错的性能,即保证性能的下限;
⽆需⼿动操作
DOM
:
我们不再需要⼿动去操作
DOM
,只需要写好
View-Model
的代码逻辑,框架会根据虚拟
DOM
和 数据双向
绑定,帮我们以可预期的⽅式更新视图,极⼤提⾼我们的开发效率;
跨平台:
虚拟
DOM
本质上是
JavaScript
对象
,
⽽
DOM
与平台强相关,相⽐之下虚拟
DOM
可以进⾏更⽅便地跨平台操作,例如
服务器渲染、
weex
开发等等。
缺点
:
⽆法进⾏极致优化:
虽然虚拟
DOM +
合理的优化,⾜以应对绝⼤部分应⽤的性能需求,但在⼀些性能要求极⾼的应⽤中虚拟
DOM
⽆法进⾏针对性的极致优化。
⾸次渲染⼤量
DOM
时,由于多了⼀层虚拟
DOM
的计算,会⽐
innerHTML
插⼊慢
28. Vue
的
di!
算法原理是什么?
Vue
的
di!
算法是平级⽐较,不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式
+
双指针⽅式⽐较
先⽐较两个节点是不是相同节点
相同节点⽐较属性,复⽤⽼节点
先⽐较⼉⼦节点,考虑⽼节点和新节点⼉⼦的情况
优化⽐较:头头、尾尾、头尾、尾头
⽐对查找,进⾏复⽤
29.
组件写
name
有啥好处?
增加
name
属性,会在
components
属性中增加组件本身,实现组件的递归调⽤。
可以表示组件的具体名称,⽅便调试和查找对应的组件。