美文网首页
web前端面试题@三(子组件修改父组件传递的值、swiper常见

web前端面试题@三(子组件修改父组件传递的值、swiper常见

作者: 王芃皓 | 来源:发表于2019-11-15 02:54 被阅读0次

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

            答案是必然的!而且还有很多种~,

            第一种  是直接在子组件中通过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算法还有好多知识,参考即可,对与不对交给四哥,四哥给说法~~

    相关文章

      网友评论

          本文标题:web前端面试题@三(子组件修改父组件传递的值、swiper常见

          本文链接:https://www.haomeiwen.com/subject/mkqjictx.html