前端面试题(二) @R

详述虚拟DOM中的diff算法

1、首先要先讲一下虚拟DOM是如何实现的
虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的

虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象）
2、diff算法是如何进行比对的
正常的diff算法，是通过层层对比，单单对比来进行的，对于我们的前端性能来说，很明显是不可以这样实现的。

所以，前端的diff算法是通过以下步骤来实现的

步骤一：用JS对象模拟DOM树
步骤二：比较两棵虚拟DOM树的差异
步骤三：把差异应用到真正的DOM树上

同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比
首先对根元素进行对比，如果根元素发生改变就直接对根元素替换
如果根元素没有发生改变的话，再对下一层元素进行对比，如果对比发现元素发生删除，就执行删除，发现元素被替换就执行替换，发现添加了新的元素就执行添加
对比的同时，会通过key值来判断元素是否发生改变，判断元素是仅仅位置发生改变还是需要整个替换或删除
如果不是元素发生改变的话，再对内容进行对比，如果是内容发生改变的话，就直接修改内容
其实就是进行逐层对比，再通过不同的对比来判断执行不同的操作

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

1.问题描述
在开发一个Jquery项目时，用到了Swiper插件，并且因为要求数据的动态性，所以swiper-wrapper里面的swiper-silde都是由Jquery动态渲染出来的DOM，结构如图所示

2.问题分析
在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就会失效。也就是说Swiper不能用了。
后来看了下官网文档然后认真理了下项目的思路，发现应该是同步异步的原因所导致，在项目初始化时，Swiper会自动的扫描swiper-wrapper下的swiper-slide的个数，然后根据这个在初始化的Swiper。但是在这个时候因为Ajax是一个异步请求，所以很有可能这个时候Ajax的请求还没有完全的完成。所以导致了swiper-wrapper里面的内容是空的，这也就是导致Swiper失效的直接原因。

3.解决方案
解决方案分为两种：

1)、把Swiper的初始化直接放到Ajax请求的成功回调里面
2)、在初始化Swiper的时候在里面加上它的两个属性

observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true //修改swiper的父元素时，自动初始化swiper

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

---

父子组件传值时，父组件传递的参数，数组和对象，子组件接受之后可以直接进行修改，并且会传递给父组件相应的值也会修改。

如果传递的值是字符串，直接修改会报错。

不推荐子组件直接修改父组件中的参数，避免这个参数多个子组件引用，无法找到造成数据不正常的原因