前端常见的面试题（五）

1、详述虚拟DOM中的diff算法

首先对比新旧虚拟DOM，找出差异，并把对比出来的差异值渲染到真实DOM上，这样可以避免性能上的浪费。diff的过程就是通过patch函数，进行深度遍历比较新旧节点，一边比较一边给真实的DOM做补丁

patch函数是怎么比较的？
patch函数会接收两个参数，oldVnode和Vnode分别代表新的节点和之前的旧节点。如果节点类型变了，比如p标签变h1，那就直接替换节点。如果节点属性变了，比如属性属性值，那就更新节点。如果内容text变了，那就直接修改内容。

2、swiper获取数据、css都没有问题，但是图片不动，应该怎么解决

原因：
swiper滑动失效的原因是因为swiper的初始化在数据加载完成之前
因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经执行完了，通俗的讲就是异步了

解决办法：

1. 在数据调用结束后再进行swiper初始化。实现原理是通过vue自带的nextTick方法，它会在数据变化之后，DOM更新以后进行回调函数，然后把轮播图放在回调函数里就解决了
2. 在swiper初始化的时候加上两个属性（observer:true、observeParents:true）。实现原理是如果不是轮播图的情况下，直接在初始化时加上observer（修改swiper自己或子元素时，自动初始化swiper）、observeParents（修改swiper的父元素时，自动初始化swiper）这两个参数就行了，会在数据变化时，再进行初始化
3. 在加载组件时用v-if判断，实现原理是通过双向数据绑定，给他绑定一个空数组，判断这个数组，如果有数据或者length>1的时候在渲染

3、子组件能不能修改父组件传递过来的数据

能，但是不能直接修改

• 第一种是直接在子组件中通过this.$parent.event来调用父组件的方法。
  具体实现是在父组件中定义一个修改数据的方法，然后在子组件中定义一个方法，在子组件的方法中通过"this.$parent.父组件方法名"来调用父组件中的方法
• 第二种是在子组件里用$emit向父组件触发一个事件，由父组件监听这个事件。
  具体实现是通过在父组件里面的子组件标签内定义自定义方法"@自定义方法名：父组件的方法名"，子组件中通过"this.$emit(‘自定义的方法名’)"来调用父组件中的方法
• 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法，在子组件的方法里面直接通过" this.父组件的方法名()"来调用
• 第四种是先将值传递给子组件，子组件 props 接收并修改，然后通过"this.$emit(‘自定义的方法名’，子组件修改完传回去的数据)"广播一个事件给父组件，并将值一并传递，父组件 @子组件广播过来的事件，并定义一个方法，在该方法中，改变传递过来的值，父组件又会将值传递给子组件，这样就形成了一个闭环，修改成功

小四说：
1、子–父--子
2、通过props来接收，在data中定义一个方法，直接修改data中的数据
3、通过计算属性来修改