前端面试题整理——VUE相关题目与回答

1、v-if与v-show的区别？

v-if的原理是根据判断条件来动态的进行增删DOM元素，

v-show是根据判断条件来动态的进行显示和隐藏元素，频繁的进行增删DOM操作会影响页面加载速度和性能所以此时使用v-show更合理。

只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的。

2、生命周期有哪些？分别表示意义是什么？

beforeCreate()：在实例生成之前

created()：在实例生成之后

beforeMount()：在模板已经被编译成函数之后，组件内容被渲染到页面之前

mounted()：在组件内容被渲染到页面之后

beforeUpdate()：当data中的数据发生变化时

updated()：当data中的数据完成变化，同时页面完成更新后

VUE2：beforeDestroy()/VUE3：beforeUnmount()：当Vue应用失效时

VUE2：Destroyed()/VUE3：unmounted()：当Vue应用失效时，且dom完全销毁之后

3、nextTick的用途？

官方文档解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

应用场景：需要在视图更新之后，基于新的视图进行操作。

原因是Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

官方提示：注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

4、key的作用？

key的作用主要是为了高效的更新虚拟DOM。

另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。

5、组件通信有哪些方式？

组件通信方式有8种：

1、props / $emit

2、$children / $parent

3、provide / inject

4、ref / refs

5、eventBus

6、Vuex

7、localStorage / sessionStorage

8、$attrs / $listenes

通信形式可归类为两类：父子组件之间的通信、非父子之间的通信（兄弟组件，隔代关系组件）

父子组件通信方式可用：1、2、3、4、8

兄弟组件通信方式可用：5、6

跨级组件通信可用：3、5、6、8

6、单页应用有哪些优缺点？

优点：
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、基于上面一点，SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
5、对前端人员javascript技能要求更高，促使团队技能提升。

缺点：

1、分功能模块的鉴权不好实现。

2、不利于SEO。

3、初次加载耗时相对增多。

4、导航不可用，如果一定要导航需要自行实现前进、后退。

5、对开发人员技能水平、开发成本高。

7、watch、computed有什么区别？

watch：

不支持缓存

支持异步

只可以设置一个函数，可以带有两个参数

监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作

不仅可以监听data中的数据，还可以监听路由的变化，

同时，在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时，检测账号是否可用。

watch对于引用类型是拿不到oldVal值，如果要深度监听需要添加deep:true属性。

computed：

支持数据的缓存。

函数内部的数据改变也会触发。

不支持异步，当computed内部有异步操作时computed无效

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般用computed

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

8、路由模式有哪些？区别是什么？

有两种模式：hash哈希模式、history模式

hash哈希模式：#值后面哈希发生变化，不会导致浏览器向服务器发送请求，也就不会发生刷新页面。

history模式：则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

9、vuex有哪些基本概念？

state：用于数据的存储，是store中的唯一数据源

getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算

mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件

actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作

modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

vuex在vue组件的使用：

dispatch：触发actions

commit：触发mutations

mapState：辅助函数，简洁获取多个state

mapGetters：辅助函数，简洁获取多个getters

mapActions：辅助函数，映射actions进行触发dispatch

mapMutations：辅助函数，映射mutations进行触发commit

10、$router与$route的区别

1. $route从当前router跳转对象里面可以获取name、path、query、params等（<router-link>传的参数由 this.$route.query或者 this.$route.params 接收）

2. $router为VueRouter实例。想要导航到不同URL，则使用$router.push方法；返回上一个history也是使用$router.go方法

11、Vue高级特性

　　（1）自定义v-model，由于子组件不能直接修改父组件值，所以使用自定义v-model来实现子父组件之间的数据双向绑定。

　　（2）$nextTick，查看第3条答案，考点vue的渲染和数据

　　（3）ref，获取dom节点

　　（4）slot，基本使用、作用域插槽、具名插槽的使用。作用是从父组件向子组件插入特定内容。

　　作用域插槽的使用，先在子组件的slot定义动态属性，然后在父组件插槽位置定义v-slot获取子组件slot的动态属性值。

　　（5）动态、异步组件

　　动态组件用法：<component :is="component-name"/>，必须是动态属性:is

　　动态组件需要根据数据，动态渲染的场景。即组件类型不确定。

　　使用import()函数，按需加载和异步加载大组件

　　（6）keep-alive，缓存组件，包裹的组件不会触发销毁生命周期，不会对组件重新走渲染流程。

　　（7）mixin，多个组件有相同的逻辑抽离出来。Vue3的Composition API也是为了解决这些问题。

　　mixin的问题：

　　变量来源不明确，不利于阅读

　　多mixin可能造成命名冲突

　　一个mixin跟组件可能出现多对多的关系，复杂度较高

12、Vue原理

（1）组件化

传统组件，只是静态渲染，更新嗨要依赖操作DOM

Vue和React的组件化是数据驱动视图，Vue是MVVM，React是setState

（2）响应式

组件data的数据一旦变化，立刻触发视图的更新，实现数据驱动视图的第一步。

vue双向绑定代码实现

监听对象、监听数组、复杂对象的深度监听

（3）vdom和diff

DOM操作非常耗费性能，vdom和diff算法就是解决有效控制dom操作。

vdom原理：用JS模拟DOM结构，计算出最小的变更，最后再操作DOM。

diff即对比，对比两个数据结构之间的差异。两棵树做diff，如vdom。

树的diff时间复杂度是O(n^3)。第一遍历tree1，第二遍历tree2，第三排序。

优化时间复杂度到O(n)：

　　1.只比较同一层级，不跨级比较

　　2.tag不相同，则直接删掉重建，不再深度比较

　　3.tag和key，两者都相同，则认为是相同节点，不再深度比较

diff算法关键函数：h函数，vnode，patch函数，patchVnode函数，updateChildren函数，sameVnode函数，addVnodes，removeVnodes

（4）模板编译

JS的with语法，改变{}内自由变量的查找规则，当作obj属性来查找，如果找不到会报错，打破了作用域规则。

vue template complier 将模板编译为 render 函数。

执行 render 函数生成vnode，再到渲染和更新。

（5）渲染过程

初次渲染过程：

　　1.解析模板为render函数（或再开放环境完成，vue-loader）

　　2.触发响应式，监听data属性getter、setter

　　3.执行render函数，生成vnode，执行patch(elem,vnode)

更新过程：

　　1.修改data，触发setter（此前在getter中已被监听）

　　2.重新执行render函数，生成newVnode

　　3.执行patch(vnode,newVnode)

官方流程图：

异步渲染：

　　汇总data的修改，一次性更新视图，减少DOM操作次数，提高性能。

　　掌握$nextTick

（6）前端路由

// url的组成部分
// http://127.0.0.1:8888/index.html?a=100&b=200#/aaa/bbb
 
location.protocol // http:
location.hostname// 127.0.0.1
location.host // 127.0.0.1:8888
location.port // 8888
location.pathname // /index.html
location.search // ?a=100&b=200
location.hash // #/aaa/bbb

hash模式是通过hash的变化触发页面跳转，即浏览器的前进、后退

hash变化不会刷新页面，SPA必须的特点

hash永远不会提交到server端（前端自生自灭）

实现简单的监听hash：

// hash 变化包括：
// JS修改url
// 手动修改url的hash
// 浏览器前进、后退
 
window.onhashchange = (event)=>{
  console.log('old url',event.oldURL)
  console.log('new url',event.newURL)
  console.log('hash',location.hash)
}
 
// 页面初次加载，获取 hash
document.addEventListener('DOMContentLoaded',()=>{
  console.log('hash:',location.hash)
})
 
// JS 修改 url
document.getElementById('btn1').addEventListenter('click',()=>{
  location.href = '#/user'
})

H5 history模式用url规范的路由，但跳转时不刷新页面。

使用history.pushState和window.onpopstate进行实现。

// 页面初次加载，获取 path
document.addEventListener('DOMContentLoaded',()=>{
  console.log('load', location.pathname)
})
 
// 打开一个新路由
// 【注意】用 pushState 方式，浏览器不会刷新页面
document.getElementById('btn1').addEventListener('click',()=>{
  const state = {name:'page1'}
  console.log('切换路由到','page1')
  history.pushState(state,'','page1')
})
 
// 监听浏览器前进、后退
window.onpopstate = (event)=>{
  console.log('onpopstate',event.state,location.pathname)
}

　　

13、为什么组件data必须是一个函数？

因为每个组件在编译后都是一个函数，调用组件就是实例化组件，因为data是个函数所以会形成闭包，这样组件之间的data就不会被污染。

14、ajax请求应该放在哪个生命周期？

应该放在mounted，因为mounted是页面渲染完了，ajax请求后会修改dom，这个时候才能获取到dom进行操作，放在之前没有作用。

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

使用$props，如：<User v-bind="$props">

16、何时要使用异步组件？

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

17、何时需要使用 beforeDestory?

解绑自定义事件 event.$off

清除定时器

解绑自定义的DOM事件，如window scroll等

18、Vue常见性能优化方式

合理使用v-show和v-if

合理使用computed

v-for时加key，以及避免和v-if同时使用

自定义事件、DOM事件及时销毁

合理使用异步组件

合理使用keep-alive

data层级不要太深

使用vue-loader在开发环境做模板编译（预编译）

webpack层面的优化

前端通用的性能优化，如图片懒加载等

使用SSR