脚本宝典收集整理的这篇文章主要介绍了前端面试题 -- Vue,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
作为前端开发中现行最火的框架之一,Vue
在面试中出现的频率不断增加。基于此,总结了一些 Vue
方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴
感兴趣的小伙伴也可以点击 这里,查看前端方面的其他面试题,欢迎 star
关注
如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过
以下 ↓
vue
实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应监听回调
单向数据流: 顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种action
来维护对应的state
双向数据绑定:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下,会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化,增加了出错时
debug
的难度
#
vue-router
默认使用 hash
模式,所以在路由加载的时候,项目中的 url
会自带 #
。如果不想使用 #
, 可以使用 vue-router
的另一种模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是,当我们启用history
模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现404
的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果URL
匹配不到任何静态资源,则应该返回同一个index.htML
页面
MVC
特点:
View
传送指令到 Controller
Controller
完成业务逻辑后,要求 Model
改变状态Model
将新的数据发送到 View
,用户得到反馈所有通信都是单向的
MVVM
特点:
View
的变动,自动反映在 ViewModel
,反之亦然具体请移步 这里
vue实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程
beforeCreate()
在实例创建之间执行,数据未加载状态created()
在实例创建、数据加载后,能初始化数据,dom
渲染之前执行beforemount()
虚拟dom
已创建完成,在数据渲染前最后一次更改数据mounted()
页面、数据渲染完成,真实dom
挂载完成beforeUpadate()
重新渲染之前触发updated()
数据已经更改完成,dom
也重新 render
完成,更改数据会陷入死循环beforedestory()
和 destoryed()
前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行父组件向子组件通信
子组件通过 PRops
属性,绑定父组件数据,实现双方通信
子组件向父组件通信
将父组件的事件在子组件中通过 $emIT
触发
非父子组件、兄弟组件之间的数据传递
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.')
Vuex 数据管理
路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能
参考 这里
使用了v-if
的时候,如果值为false
,那么页面将不会有这个html
标签生成。
v-show
则是不管值为true
还是false
,html
元素都会存在,只是CSS
中的display
显示或隐藏
$router
为VueRouter
实例,想要导航到不同URL
,则使用$router.push
方法
$route
为当前router
跳转对象里面可以获取name
、path
、query
、params
等
$nextTick
是在下次DOM
更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick
,则可以在回调中获取更新后的DOM
因为js本身的特性带来的,如果data
是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有Vue实例的数据。如果将data
作为一个函数返回一个对象,那么每一个实例的data
属性都是独立的,不会相互影响了
我们可以将同一函数定义为一个 method
或者一个计算属性。对于最终的结果,两种方式是相同的
不同点:
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于
method
,只要发生重新渲染,method
调用总会执行该函数
jQuery 专注视图层,通过操作 DOM 去实现页面的一些逻辑渲染; Vue 专注于数据层,通过数据的双向绑定,最终表现在 DOM 层面,减少了 DOM 操作
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
参考 官方文档-自定义指令
@H_932_406@16. Vue 中怎么自定义过滤器可以用全局方法Vue.filter()
注册一个自定义过滤器,它接收两个参数:过滤器ID
和过滤器函数。过滤器函数以值为参数,返回转换后的值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
过滤器也同样接受全局注册和局部注册
keep-alive
是Vue
内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>
可以使用API提供的props,实现组件的动态缓存
具体参考 官方API
key
的特殊属性主要用在Vue
的虚拟DOM
算法,在新旧nodes
对比时辨识VNodes
。如果不使用key
,Vue
会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key
,它会基于key
的变化重新排列元素顺序,并且会移除key
不存在的元素。有相同父元素的子元素必须有独特的
key
。重复的key
会造成渲染错误
具体参考 官方API
数据驱动 组件系统
优点:
缺点:
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
则不会有这个问题整理的过程也是重新梳理知识点的过程,途中会发现很多自己理解不是很到位的东西,也算是一种收获吧
后面会一直不定期更新一些其他方面的面试题或者遇到的有趣的东西,感兴趣的小伙伴可以关注哦
完整版面试题 GitHub地址
遇见更优秀的自己,从现在开始!
以上
以上是脚本宝典为你收集整理的前端面试题 -- Vue全部内容,希望文章能够帮你解决前端面试题 -- Vue所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。