2023年3-4月面试Vue相关面试题总结

1.vue的生命周期有哪些分别在做了什么

beforeCreate  创建vue实例，注测data,method,proxy等方法

created 将data,method等变量方法注入到vue实例，可访问到

beforeMount  将templete编译虚拟成dom,生成render函数

mounted  将节点挂载到页面上可进行dom相关的操作

beforeUpdate data数据改变，视图未更新

updated data数据改变后视图更新（不可在该生命周期修改data，会陷入死循环）

vue2:

beforeDestroy 组件销毁前一般在该生命周期解绑全局注测的方法和变量

destred  组件已销毁

vue3以上两个周期名字改变为以下两个

beforeUnmount 组件销毁前一般在该生命周期解绑全局注测的方法和变量

unmounted 组件已销毁

2.vue的组件通信方式有哪些

父子组件通信：props和$emit，$parent，

祖孙组件通信：provide,inject

vuex，eventbus可现实任何组件通信,

refs直接访问组件，$attrs属性透传

3.vuex有哪些属性和方法分别用来做什么的

state  data属性

getter 计算属性

mutition 同步方法$commit触发

actions 异步方法,对mutition进一步封装， $dispach触发

mudule 将vuex分包

4.wacth和computed的区别是什么

watch检测数据的改变做相应操作和处理逻辑

computed 某个数据依赖多个数据，任何数据改变都会自动计算

5.v-if和v-show的区别是什么

 这个问题比较基础，v-if是dom元素的生成和删除的切换，v-show不改变dom，只是样式的显示和隐藏

6.vue的双向绑定是怎么实现的

双向绑定分为

视图改变数据改变，  是对模板上的指令v-model和{{}} 等进行了解析，然后将视图上输入的数据给更新到data里面

数据改变视图改变， 是对数据进行了劫持，vue2使用的defineProperty,vue3使用的proxy，当数据改变时触发set方法中的订阅者方法，然后改过的数据生产虚拟dom跟之前的虚拟dom用diff算法做对比，找出差异的地方继续更新。

7.vue父组件和子组件的生命周期执行顺序是怎样的

父组件beforeMount，父组件的mounted，父组件的beforeMount，进行到这个节点是要将templete通过complier编译成结构化数据传给成render函数，这个时候会遇到挂载到页面上的子组件。然后开始执行子组件的beforeCreate,created,beforeMount,mounted,执行完之后再执行父组件的mounted

8.vueRouter有几种模式分别是什么，实现的原理是什么

hash模式，  默认路由模式，支持所有浏览器，使用的window.hash方法

history模式，  使用的h5的history API方法，利用history.pushState   方法实现跳转

abstruct模式， 支持所有 JavaScript 运行环境，一般用在nodejs环境中当检测没有浏览会       强制进入这个模式

9.vue2和vue3的区别有哪些

 双向绑定原理改变，vue2使用的defineProprotey, vue3使用proxy

 vue3的diff算法进行了优化，使用了最长递增子序列

 vue3的编码方式改变，使用compsitionAPI的方式进行编码

10.vue的列表加key有什么作用

  给列表绑定key，会让页面更新速度更快。因为vue使用的是虚拟dom,当数据改变时对比两个虚  拟dom数据，如果有key直接对比key值是新增还是删除，可以进行精准的作。如果没有key的话就会进行逐一的对比。如果key绑定的是列表的index给没有绑定是样的效果

11.vue的计算属性如何绑定给v-model

 给计算属性添加一个set方法，

 通常情况下计算属性是依赖多个属性计算出来的值。但是当直接改变计算属性，而不是通       过其他依赖属性改变时，需要给计算属性设置一个set方法 用来改变其原本依赖属性的值

12.vue的路由守卫有哪些钩子函数分别作用是什么

路由守卫参数通常有三个to即将进入的路由对象, from 当前导航正要离开的路由,next回调函数必须执行才能完成跳转

全局路由守卫

beforeEach，全局前置守卫，

afterEach 全局后置守卫

路由独享守卫  beforeEnter 用法和参数跟全局守卫一一致

组件内的路由守卫

beforeRouterEnter,  渲染改组件前调用，组件实例还未创建，无法使用this,

beforRouteUpdate  当前路由改变但是组件复用时会调用

beforeRouteLeave 导航离开该组件时调用可以访问this

13.vue的diff算法是什么样的

vue的diff算法是双向四指针对比，只对比同级节点，如果同级节点不一致直接删除不关 心子节点是否改变。vue3增加了最长递增子序列的算法优化。

以上是我最近面试总结关于vue相关的面试题，某些问题的答案可能还不够完善，欢迎补充。