2024年刚刚翻新前端vue面试题

1、vue中常用的指令及作用？

1. v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的
2. v-html指令：绑定一些包含html代码的数据在视图上
3. v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性
4. v-if指令：取值为true/false，控制元素是否需要被渲染
5. v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
6. v-for指令：遍历data中存放的数组数据，实现列表的渲染。
7. v-bind指令：用于动态绑定DOM元素的属性;例如 标签的href属性，标签的src属性等。v-bind可以简写成“：”
8. v-on指令：可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中定义的方法，v-on:简写为@
9. v-model指令：用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。
10. v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

2、vue全家桶及react全家桶包含哪些？

vue全家桶：

vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)

react全家桶：

react（整体架构） +  redux || mobx（状态管理） +  react-router（路由） +  axios（ajax请求） +  antd || react-material || antd-model(UI框架库)

3、vue数据双向绑定的实现原理以及步骤分析

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

v-model的实现具体步骤共分为四步：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

4、Vue的生命周期钩子函数

vue生命周期共分为四个阶段

一：实例创建

二：DOM渲染

三：数据更新

四：销毁实例

共有八个基本钩子函数

1.beforeCreate --创建前

触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

在此阶段可以做的事情：加loading事件

2.created --创建后

触发的行为：vue实例的数据对象data有了，$el还没有

在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换

在此阶段可以做的事情：。。。

4.mounted --渲染后

触发的行为：vue实例挂载完成，data.filter成功渲染

在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate --更新前

触发的行为：data更新时触发

在此阶段可以做的事情：。。。

6.updated —更新后

触发的行为：data更新时触发

在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前

触发的行为：组件销毁时触发

在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后

触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

在此阶段可以做的事情：组件销毁时进行提示

5、vue的v-if与v-show的区别？

相同点：

1. v-if与v-show都可以动态控制dom元素显示隐藏

不同点：

1. v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

手段：

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

性能消耗：

v-if有更高的切换消耗；v-show有更高的初