web前端面试题@三（子组件修改父组件传递的值、swiper常见
一、子组件能不能修改父组件传递过来的数据？
答案是必然的！而且还有很多种~，
第一种 是直接在子组件中通过this.$parent.event来调用父组件的方法。具体实现是在父组件定义一个修改数据的方法，然后在子组件里定义一个方法，在子组件的方法中通过"this.$parent.父组件方法名"达到调用父组件方法的目的。
第二种是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。具体实现是通过在父组件里面的子组件标签内定义自定义方法"@自定义方法名：父组件的方法名"，子组件中通过"this.$emit('自定义的方法名')"来调用父组件中的方法。
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法，在子组件的方法里面直接通过" this.父组件的方法名()"调用，简单粗暴，但是容易出问题
第四种是先将值传递给子组件，子组件 props 接收并修改，然后通过"this.$emit('自定义的方法名'，子组件修改完传回去的数据)"广播一个事件给父组件，并将值一并传递，父组件 @子组件广播过来的事件，并定义一个方法，在该方法中，改变传递过来的值，父组件又会将值传递给子组件，这样就形成了一个闭环，ok成功修改~
第五种是在子组件的data中定义一个新属性接收父组件传过来的数据，直接改变新属性。
第六种是通过计算属性来更改数据
二、swiper获取数据、css都没有问题，但是图片不动，应该怎么解决？
原因：swiper滑动失效的原因是因为swiper的初始化在数据加载之前完成了。因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了，通俗的来说就是异步了。
解决办法：
第一种在数据调用结束后再进行swiper初始化。实现原理，通过vue自带的nextTick方法，它会在数据变化以后，DOM更新以后进行回调函数。把轮播图放在回调里就解决了。
第二种在swiper初始化的时候加上两个属性（observer:true、observeParents:true）。原理是如果不是轮播的情况下呢，直接在初始化时加上observer（修改swiper自己或子元素时，自动初始化swiper）、observeParents（修改swiper的父元素时，自动初始化swiper）这两个参数就行了，会在数据变化时，再帮你初始化一次
第三种是加载组件时加v-if判断——！！【推荐】！！。原理是通过双向数据绑定，给他绑定一个空数组，判断这个数组如果有数据或者length>1的时候，在渲染。
三、详述虚拟DOM中的diff算法~
这个问题纯属个人简单分析，参考即可。。。。不是抄袭啊！
首先，我们要知道diff大概是啥？Diff算法是Vue视图动态改变的核心算法之一。简单的来说Diff算法就是寻找两个Vnode树之间差异的算法。
然后，通过看其他博客和简书中理解大致的流程为：
可以理解为有旧的Vnode数组和新的Vnode数组这两个数组
然后有四个变量充当指针分别指到两个数组的头尾
重复下面的对比过程，直到两个数组中任一数组的头指针超过尾指针，循环结束
对比两个数组的头部，如果找到，把新节点patch到旧节点，头指针后移
对比两个数组的尾部，如果找到，把新节点patch到旧节点，尾指针前移
然后互相交叉对比，旧尾新头，如果找到，把新节点patch到旧节点，并插入到正确位置，旧尾指针前移，新头指针后移
继续互相交叉对比，旧头新尾，如果找到，把新节点patch到旧节点，并插入到正确位置，新尾指针前移，旧头指针后移
都没有，开始用新指针对应节点的key去旧数组中直接找
1.如果没有key，创建新的节点
2.如果有key并且是相同的节点，把新节点patch到旧节点，并插入到正确位置
3.如果有key但是不是相同的节点，创建新节点
循环结束后，
1.先对比旧数组的头尾指针，如果旧数组遍历完了（可能新数组没遍历完，有漏添加的问题），添加新数组中漏掉的节点
2.再对比新数组的头尾指针，如果新数组遍历完了（可能旧数组没遍历完，有漏删除的问题），删除旧数组中漏掉的节点
大概就是这个意思，不过关于diff算法还有好多知识，参考即可，对与不对交给四哥，四哥给说法~~
