前端开发经典面试题及答案——Vue篇

前端开发经典面试题及答案——Vue篇

一、v-show和v-if区别

二、v-for的key的作用

快速查找到节点，减少渲染次数，提升渲染性能

三、vue组件生命周期

四、vue组件通信

五、组件渲染和更新的过程

六、双向数据绑定v-model的实现原理

双向数据绑定核心的方法便是通过Object.defineProperty( )来实现对属性的劫持，达到监听数据变动的目的。

七、对mvvm的理解

m → model v → view vm → viewModel

dom通过监听事件操作vue里的data，反之vue中的data通过指令操作dom，即数据驱动视图。

八、Vue封装组件的原因，data 为什么是函数

封装组件是为了解耦，提高代码复用率。页面上可以复用的都称之为组件，它是 HTML、CSS、JS 的聚合体。

组件中的data：让每个返回的实例都可以维护一份被返回对象的独立的拷贝。

九、ajax请求在哪个生命周期

mounted，因为js是单线程，ajax异步获取数据。

十、如何将组件所有props传递给子组件

父组件绑定一个自定义属性变量，然后子组件通过props使用这个变量即可。

十一、自定实现v-model

model对象包含两个属性：prop、event

<input type="text" :value="text1" @input="$emit('change1', $event.target.value)" >

十二、多个组件有相同逻辑，如何抽离

使用mixin对公共部分的逻辑进行抽离

十三、何时使用异步组件

加载大组件，路由异步加载

十四、作用域插槽

在solt组件中有自己的data，把它传给使用的地方

十五、vue-router常用路由模式

hash默认，h5 histroy需要服务端支持

十六、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：使用Localstorage sessionStorage 或cookie

实际使用时当vuex值变化时，F5刷新页面，vuex数据重置为初始状态，所以还是要用到localStorage。

方案2：插件vuex-persistedstate

vuex-persistedstate默认持久化所有state，可以指定需要持久化的state。