前端vue精简版面试题(个人理解篇）

￡神魔★判官ぃ 2023-01-17 10:40 20阅读 0赞

## 1.[vue组件中为什么data必须是一个函数][vue_data] ##

## 2.[vue常用的指令][vue] ##

## 3.[生命周期共有几个？分别在什么时候使用？][Link 1] ##

## 4.[路由守卫钩子函数和执行顺序][Link 2] ##

## 5.[Vue中双向数据绑定是如何实现的][Vue] ##

## 6.[keep-alive][] ##

## 7.[vue中的$nextTick][vue_nextTick] ##

## 8.v-for中为何要使用key ##

因为vue组件高度复用，增加Key可以标识组件的唯一性，在列表渲染的时候使用key属性，更新组件时判断两个节点是否相同，相同就使用，不相同就删除就的创建新的

## 9.vue中数组中的某个对象的属性发生变化，视图不更新如何解决 ##

因为vue的检查机制在进行视图更新时无法检测数组中某个对象的属性值的变化，数据没有经过数据劫持，vue对这些数据没有办法进行数据劫持，解决方案有两种  
方案一：利用this.set(this.obj,key,val)  
三个参数的意思为：目标对象，下标，更新后的值  
方案二：利用object.assign(\{\},this.obj) 创建新对象  
如果是数组第一个参数就用\[ \],如果是对象第一个参数就用\{ \}  
assign用于对象合并

## 10.prop验证和默认值 ##

props：会接收不同的数据类型，常用的数据类型的设置默认值的写法  
常用的验证类型有：Number，String，Boolean，Array，Function，Object  
prop数据单项传递，父不影响子，子影响父，不能在组件中直接修改prop传递的值，vue会发出警告

## 11.虚拟dom ##

用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作，然后对比前后两次的虚拟DOM的变化，只渲染一次

## 12.v-if和v-show的区别 ##

都可以动态控制dom元素的显示隐藏  
v-if可以直接控制元素的添加删除，v-if有更高的切换消耗，适合运行条件很少改变的情况  
v-show只会给元素的display属性设置为block/none，有更高的初始渲染消耗，适合频繁切换

## 13. vuex的核心概念和运行机制 ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据  
1.state 所有的数据都存储在state中，state是一个对象 ,所有共享的数据都要统一放到store的state中进行存储  
2.mutations 可以直接操作state中的数据 ，只能通过mutation变更store的数据，不可以直接操作 store中的数据  
3.actions 只能调用mutations的方法 ，用于处理异步任务，如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方法间接更改数据  
4.getters 类似计算属性实现对state中的数据做一些逻辑性的操作  
getter用于对store中的数据进行加工处理形成新的数据，getter可以对store中已有的数据加工处理后形成新的数据，类似vue的计算属性  
5.modules 将仓库分模块存储，vuex允许我们将store分割成模块，每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块一一从上至下进行同样方式的分割  
vuex的运行机制：在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutions中的方法，在mutions中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中

## v-if和v-for的优先级 ##

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，不推荐v-if和v-for同时使用  
推荐这样使用：

<ul v-if="ShowUsers">
    <li v-for="users in list"
    :key="users.id"
    >
    {
       { users.name }}
    </li>
    </ul>

也可以放在计算属性中使用

computed: {
       activeUsers: function () {
       return this.users.filter(function (user) {
       return user.isActive
       })
      }
     }

[vue_data]: https://blog.csdn.net/Z_hai_yan/article/details/116502951
[vue]: https://blog.csdn.net/Z_hai_yan/article/details/116502997
[Link 1]: https://blog.csdn.net/Z_hai_yan/article/details/116503018
[Link 2]: https://blog.csdn.net/Z_hai_yan/article/details/116503041
[Vue]: https://blog.csdn.net/Z_hai_yan/article/details/116503079
[keep-alive]: https://blog.csdn.net/Z_hai_yan/article/details/116568566
[vue_nextTick]: https://blog.csdn.net/Z_hai_yan/article/details/116568756