共计 3525 个字符,预计需要花费 9 分钟才能阅读完成。
参考文章:前端面试题 — Vue – 作者:游荡 de 蝌蚪
1. 说一下 Vue 的双向绑定数据的原理
vue 实现双向数据绑定:通过数据劫持联合发布者 - 订阅者模式的形式,再通过 Object.defineProperty()来劫持各个属性的 setter 和 getter,在数据变动时通过公布音讯给订阅者,触发相应的监听回调。
理解更多请点击:发布者 - 订阅者模式简略实现
2. 解释单向数据流和双向数据绑定
单项数据流:数据流是单向的,流动繁多可追踪,排查问题的时候快捷不便。毛病是要更新 UI 时,需创立各种 action 来变更对应的 state
3. Vue 如何去除 url 中的 #
vue-router 的两种模式:hash 和 history。hash 模式是 vue-router 默认的,路由在加载的时候,我的项目中的 url 会主动带上 #;如果要去除#,能够应用 history 模式。
new Router({
mode: 'history',
routes: []})
须要留神的是:当咱们启用
history
模式的时候,因为咱们的我的项目是一个单页面利用,所以在路由跳转的时候,就会呈现拜访不到动态资源而呈现404
的状况,这时候就须要服务端减少一个笼罩所有状况的候选资源:如果URL
匹配不到任何动态资源,则应该返回同一个index.html
页面
4. 对 MVC、MVVM 的了解
MVC
- Model:实例模型(数据保留)
- Controller:控制器(业务逻辑)
- View:视图(用户界面)
解决逻辑
- 用户通过 view 发送指令到 controller
- controller 接管指令,实现业务逻辑,告诉 model 扭转状态
- model 将新的数据渲染到 view 上,用户失去反馈
特点:所有的通信都是单向的
MVVM
- Model:模型(数据)
- View:视图(界面)
- ViewModel:视图模型是 mvvm 模式的外围,它是连贯 view 和 model 的桥梁
特点:
- 各局部之间的通信,都是双向的
- 采纳双向绑定:
View
的变动,主动反映在ViewModel
,反之亦然
详情请点击:由浅入深讲述 MVVM
两种模式的具体区别请移步:MVC,MVP 和 MVVM 的图示
5. 介绍虚构 DOM
虚构 DOM 介绍
DOM 基本操作相干知识点整顿
JavaScript 面试考点之常见 DOM 操作
6. vue 生命周期的了解
vue 实例有一个残缺的生命周期,生命周期也就是指一个实例从开始创立到销毁的这个过程
beforeCreate()
在实例创立之间执行,数据未加载状态created()
在实例创立、数据加载后,能初始化数据,dom
渲染之前执行beforeMount()
虚构dom
已创立实现,在数据渲染前最初一次更改数据mounted()
页面、数据渲染实现,实在dom
挂载实现beforeUpadate()
从新渲染之前触发updated()
数据曾经更改实现,dom
也从新re nder
实现, 更改数据会陷入死循环beforeDestory()
和destoryed()
前者是销毁前执行(实例依然齐全可用),后者则是销毁后执行
7. 组件通信
父组件向子组件通信
子组件通过 props
属性,绑定父组件数据,实现单方通信
子组件向父组件通信
将父组件的事件在子组件中通过 $emit
触发
非父子组件、兄弟组件之间的数据传递
/* 新建一个 Vue 实例作为地方事件总嫌 */
let event = new Vue();
/* 监听事件 */
event.$on('eventName', (val) => {//......do something});
/* 触发事件 */
event.$emit('eventName', 'this is a message.')
Vuex 数据管理
8. vue-router 路由实现
路由就是用来跟后端服务器进行交互的一种形式,通过不同的门路,来申请不同的资源,申请不同的页面是路由的其中一种性能
具体可参考:路由实现原理
9. v-if 和 v-show 区别
应用了
v-if
的时候,如果值为false
,那么页面将不会有这个html
标签生成。v-show
则是不论值为true
还是false
,html
元素都会存在,只是CSS
中的display
显示或暗藏
10. $route 和 $router 的区别
$router
为VueRouter
实例,想要导航到不同URL
,则应用$router.push
办法$route
为以后router
跳转对象外面能够获取name
、path
、query
、params
等
11. NextTick 是做什么的
$nextTick` 是在下次 `DOM` 更新循环完结之后执行提早回调,在批改数据之后应用 `$nextTick`,则能够在回调中获取更新后的 `DOM
具体可参考官网文档:深刻响应式原理
12. Vue 组件 data 为什么必须是函数
因为 js 自身的个性带来的,如果
data
是一个对象,那么因为对象自身属于援用类型,当咱们批改其中的一个属性时,会影响到所有 Vue 实例的数据。如果将data
作为一个函数返回一个对象,那么每一个实例的data
属性都是独立的,不会相互影响了
13. 计算属性 computed 和事件 methods 有什么区别
咱们能够将同一函数定义为一个 method
或者一个计算属性。对于最终的后果,两种形式是雷同的
不同点:
computed: 计算属性是基于它们的依赖进行缓存的, 只有在它的相干依赖产生扭转时才会从新求值对于
method
,只有产生从新渲染,method
调用总会执行该函数
14. 比照 jQuery,Vue 有什么不同
jQuery 专一视图层,通过操作 DOM 去实现页面的一些逻辑渲染;Vue 专一于数据层,通过数据的双向绑定,最终体现在 DOM 层面,缩小了 DOM 操作 Vue 应用了组件化思维,使得我的项目子集职责清晰,进步了开发效率,不便反复利用,便于协同开发
15. Vue 中怎么自定义指令
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()}
})
部分注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {el.focus()
}
}
}
参考 官网文档 - 自定义指令
16. Vue 中怎么自定义过滤器
能够用全局办法
Vue.filter()
注册一个自定义过滤器,它接管两个参数:过滤器ID
和过滤器函数。过滤器函数以值为参数,返回转换后的值
Vue.filter('reverse', function (value) {return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
过滤器也同样承受全局注册和部分注册
17. 对 keep-alive 的理解
keep-alive
是Vue
内置的一个组件,能够使被蕴含的组件保留状态,或防止从新渲染
<keep-alive>
<component>
<!-- 该组件将被缓存!-->
</component>
</keep-alive>
能够应用 API 提供的 props,实现组件的动静缓存
具体参考 官网 API
18. Vue 中 key 的作用
key
的非凡属性次要用在Vue
的虚构DOM
算法,在新旧nodes
比照时辨识VNodes
。如果不应用key
,Vue
会应用一种最大限度缩小动静元素并且尽可能的尝试修复 / 再利用雷同类型元素的算法。应用key
,它会基于key
的变动重新排列元素程序,并且会移除key
不存在的元素。有雷同父元素的子元素必须有独特的key
。反复的key
会造成渲染谬误
具体参考 官网 API
19. Vue 的外围是什么
数据驱动 组件零碎
20. vue 等单页面利用的优缺点
长处:
- 良好的交互体验
- 良好的前后端工作拆散模式
- 加重服务器压力
毛病:
- SEO 难度较高
- 后退、后退治理
- 首次加载耗时多
21. vue-router 应用 params 与 query 传参有什么区别
vue-router
能够通过 params
与 query
进行传参
// 传递
this.$router.push({path: './xxx', params: {xx:xxx}})
this.$router.push({path: './xxx', query: {xx:xxx}})
// 接管
this.$route.params
this.$route.query
params
是路由的一部分, 必须要有。query
是拼接在url
前面的参数,没有也没关系params
不设置的时候,刷新页面或者返回参数会丢,query
则不会有这个问题
后记
整顿的过程也是从新梳理知识点的过程,途中会发现很多本人了解不是很到位的货色,也算是一种播种吧