2022前端面试

1. Vue的优点？Vue的缺点？

优点：1.组件化开发能大幅提高开发效率、测试性，复用性。轻量级，虚拟dom,响应式，单页面路由，数据与视图分开。

缺点：单页面不利于SEO，不支持IE8一下，首屏加载时间长。

2. vue 和 react 的异同点？

相同点：

都使用了虚拟dom组件化开发都是单项数据流（父子组件之间，不建议子组件直接修改父组件的数据）都支持服务端渲染

不同点：

React的JSX，Vue的 template数据变化，React手动（setState）,Vue自动（初始化已响应式处理，Object.defineProperty）React单项绑定，Vue双向绑定React用Redux,Vue用Vuex状态管理工具

---

3.MVVM是什么？和MVC有和区别？

MVC

Model(模型)：负责从数据中取数据View(视图)：负责展示数据的地方Controller(控制器)：用户交互的地方，例如事件点击等思想：Controller将Model的数据展示在View上。

MVVM

VM:也就是ViewModel，做了两件事达到了数据的双向绑定，一是将【模型】转换成【视图】，即将后端的数据转换成所看到的页面。实现的方式是：数据绑定。二是将【视图】转换成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听 。思想：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动 *** 作dom,来改变view的显示，而是改变属性后该属性对应的View层显示会自动改变。它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据  4、vue双向数据绑定的原理？

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性身上的属性也都加上setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就监听到了数据的变化。

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

第三步：watcher订阅者是observe和compile之间通信的桥梁，主要做的事情是：

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

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

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

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

5、$nextTick

比如点击按钮修改名字，这时候直接打印 this.ref.refContent.innerText 还是原来的名字

dom更新完毕后执行回调，确保 *** 作更新后的dom

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。 6. 递归

递归就是函数内部自己调用自己

function sum(n) {
    if(n === 1) {
        return 1;
    }
    return n + sum(n - 1)
}
console.log(sum(10))   //55

7、Vue的生命周期有哪些？

实例创建 —— dom挂载 —— 数据更新 —— 销毁

vue的生命周期常见的主要分为4大阶段8大钩子函数

1. 创建前后

在beforeCreate生命周期执行的时候，data和method还没有初始化。在created的时候，data和method已经初始化完成

2. dom 挂载前后

在beforeMounte的生命周期执行的时候，已经编译好了模板字符串，但是还没有真正渲染到页面中去在mounted的时候，已经渲染完成，可以拿到dom

3. 数据更新前后

beforeUpdate生命周期执行的时候，已经可以拿到最新的数据，但还没有渲染到视图中去updated函数执行的时候，已经把更新后的数据渲染到视图中去了

4. 销毁前后

beforeDestroy实例正准备销毁阶段，此时data，method，指令还是可用状态。在destroyed的生命周期函数执行的时候，实例已经完全销毁，此时data，method，指令都不可用

另外还有两个生命周期不常用：

keep-alive主要用于保留组件状态或避免重复渲染。activated只有在keep-alive组件激活时调用。deactivated只有在keep-alive 组件停用时调用。 8、v-if和V-show的区别？  v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建， *** 作的实际上是dom元素的创建和销毁。v-show就简单地多，不管初始条件是什么，元素总是会被渲染，并且只是简单的基于css进行切换，它 *** 作的是display:none/block属性。总结：v-if有更高的切换开销，v-show有更高的初始渲染开销，如果要非常频繁的切换，则使用v-show，如果运行时条件很少改变则使用v-if。 9、v-model语法糖的原理？ 

Vue内部的v-model是完成属性绑定 和事件监听 的语法糖。v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个 *** 作：

v-bind绑定一个value属性v-on指令给当前元素绑定input事件

10、为什么data是个函数，并且返回一个对象呢？ 因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的对象，返回一个唯一的对象组件 ，不要和其他组件共用一个对象.vue 组件可能存在多个实例，如果要用对象的形式定义data ，则会导致他们共用一个 data 对象，那么状态变更将会影响所有组件，这是不合理的；采用函数形式定义，在innitData时将其作为工厂函数返回全新data对象，有效规避多个实例之间的状态污染问题。使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件 11、v-if 和 v-for 哪个优先级更高 显然是v-for 优先级高于v-if优先级如果同时出现，每次渲染先会执行循环循环再判断条件，无论如何循环都不可避免，这样浪费了性能要避免出现这种情况，则在外层嵌套template，在这一层进行v-if 判断，然后在内部进行v-for循环  14、使用过哪些Vue的修饰符呢？ lazy: 作用是改变输入框的值时value不会改变，当光标离开输入时，v-model绑定的值value才会改变。.trim：作用类似于JS中的trim()方法，把v-model绑定的值的首位空格去掉.number：作用是将值转换为数字.stop：作用是阻止冒泡.capture：事件默认由里往外冒泡，capture修饰符作用是反过来，由外往里.self：作用是，只有点击事件绑定本身才会触发事件.once：作用是事件只执行一次.prevent：作用是阻止默认事件（如a标签的跳转）.native：加在自定义组件事件上，保证事件能执行  15、组件之间的传值方式有哪些？

1. 父子传值

2. 子父传值

3. 兄弟传值 eventBus 或者 vuex

$emit自定义事件$on接收事件

 //组件A
 methods:{
        addList:function(){
         //重点： $emit自定义事件
            eventBus.$emit('add',this.todoList)
        }
    }
​
//组件B
methods:{
        acceptList:function(){
        // 重点：$on接收事件
            eventBus.$on('add',(message)=>{
                this.lists.push({ name:message,isFinish:false })
            })
        }
    }
​

16、Vue中key的作用 key 的作用是唯一，其原理是 vue在patch 过程中通过key 可以精准判断；两个节点是否是同一个，从而避免频繁的更新不同元素，使得这个patch 过程中更加高效，减少dom *** 作，提高性能另外，若不设置key 还可能在列表更新是引发一些隐蔽的bug Vue是通过虚拟dom来表示真是dom的，在去更新视图之前，要对前后两个虚拟dom树进行分析，以得出它们的区别。如果不设置key，vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法。而使用key时，它会基于key的变化重新排列元素顺序，并且会移出key不存在的元素。key的作用主要是为了更高效的对比虚拟dom中的某个节点是不是相同节点，是用来提高diff算法的性能表现。更具体一点，vue在patch（执行diff的算法，可翻译为打补丁算法）过程中判断两个节点是否是相同节点，key值相同是一个必要条件。key会提升效率某些特殊情况下，不写key会出错，在使用v-for循环时，尽量避免直接使用数组的下标为key，因为它们在删除 *** 作时可能会导致渲染异常。最好是将key设成数据中的主键:可以把一项与另一项区别开的值。 17、vue中computed 和watch 的区别是什么？

共同点： 都是观察页面数据变化的

computed 有 缓存，计算属性。数据在调用时，如果不发生变化，直接在缓存里面取值，适合读取数据，一定要有return 返回值。watch 没有缓存，事件监听，有异步请求就用 watch，深度监听对象 handler，deep：true，immediate: true（立即执行）watch 用于监听data中定义的数据的变化,只要被监听的数据发生了变化,就会执行对应的处理函数，监听路由的变化 如果一个功能既能用watch，又能用 computed 实现，就使用 computed（简洁）如果一个功能既能用computed 和 methods 结合，就使用computed（缓存） 18、new 构造器创建对象的本质 首先执行 new 运算符. 即创建对象. 可以简单看做为 {} 的简写var p = new ...   '相当于'   var p = {}调用构造器. 并隐含一个参数, 即刚刚创建的对象.在构造器中使用 this 引用刚刚创建出来的对象.构造器结束是 默认返回 this 19、 清除浮动的方法有哪些？

为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会上来

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）父级添加overflow属性（父元素添加overflow:hidden）（不推荐）使用after伪元素清除浮动（推荐使用）

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
     content: "";
     display: block;
     height: 0;
     clear:both;
     visibility: hidden;
 }
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝

20、数据类型的判断有哪些方法？他们的优缺点及区别是什么？ typeof：只能检测简单数据类型instanceof：能检测出复杂数据类型，不能检测简单数据类型，且不能跨iframeconstructor：基本能检测所有的类型（除了null和undefined)，constructor易被修改，也不能跨iframeObject.prototype.toString.call：检测出所有数据类型。