A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

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

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

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

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

解决办法:

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

能,但是不能直接修改

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


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马