前端开发经典面试题及答案——Vue篇
一、v-show和v-if区别
二、v-for的key的作用
快速查找到节点,减少渲染次数,提升渲染性能
三、vue组件生命周期
四、vue组件通信
五、组件渲染和更新的过程
六、双向数据绑定v-model的实现原理
双向数据绑定核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的。
七、对mvvm的理解
m→modelv→viewvm→viewModel
dom通过监听事件操作vue里的data,反之vue中的data通过指令操作dom,即数据驱动视图。
八、Vue封装组件的原因,data为什么是函数
封装组件是为了解耦,提高代码复用率。页面上可以复用的都称之为组件,它是HTML、CSS、JS的聚合体。
组件中的data:让每个返回的实例都可以维护一份被返回对象的独立的拷贝。
九、ajax请求在哪个生命周期
mounted,因为js是单线程,ajax异步获取数据。
十、如何将组件所有props传递给子组件
父组件绑定一个自定义属性变量,然后子组件通过props使用这个变量即可。
十一、自定实现v-model
model对象包含两个属性:prop、event
inputtype="text":value="text1"
input="$emit(change1,$event.target.value)"十二、多个组件有相同逻辑,如何抽离
使用mixin对公共部分的逻辑进行抽离
十三、何时使用异步组件
加载大组件,路由异步加载
十四、作用域插槽
在solt组件中有自己的data,把它传给使用的地方
十五、vue-router常用路由模式
hash默认,h5histroy需要服务端支持
十六、Vue为何是异步渲染,$nextTick如何使用
因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以考虑性能问题,Vue会在本轮数据更新之后,再去异步更新视图。
$nextTick是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM。
十七、vue常见性能优化方式
十八、Vuex
十九、Vue指令
二十、$route和$router的区别
$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
$route是路由信息对象
跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path、params、hash、query、fullPath、matched、name等路由信息参数。
二十一、Vue开发的优势
二十二、vue如何解决跨域
①proxyTable:一般在项目config目录下面有个index文件。
②CORS:即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
③Nginx
二十三、为什么做首屏优化
首屏时间的快与慢,直接影响到了用户对网站的认知度。所以首屏时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要。
二十四、如何做首屏优化
二十五、vue常用的修饰符
十二七、Vuex页面刷新数据如何解决
方案1:使用LocalstoragesessionStorage或cookie
实际使用时当vuex值变化时,F5刷新页面,vuex数据重置为初始状态,所以还是要用到localStorage。
方案2:插件vuex-persistedstate
vuex-persistedstate默认持久化所有state,可以指定需要持久化的state。