关于下拉刷新watch的使用

关于下拉刷新watch的使用

这里不使用this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);,而是使用this.pullDownText = PULL_DOWN_TEXT_START;在watch中text(text) { this.loadingText = text;},

这种模式下不需要调用子组件中setText方法就可以完成,但是会出现重新渲染屏幕闪动的bug,

只使用this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);不使用this.pullDownText = PULL_DOWN_TEXT_START;以及去掉watch中监听text(text) { this.loadingText = text;},这样就可以直接文字进行修改,不会造成屏幕的闪动。

我想问的是,为什么视频中需要在使用this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START)的同时还要开启watch的监听,watch是非常耗费性能的功能,在已经实现功能的情况下再使用watch不但会耗费性能而且可能出现闪屏的bug为什么还要开启watch呢

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,this.$refs.pullDownLoading.setText这个是传递过来的值。

watch是监听父组件传递过来的这个值是否发生变化的。因为这里直接显示的值是loadingText,并不是父级传递来的这个,所以是需要来监听下改变。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 慕用0863198 提问者 #1
    this.$refs.pullDownLoading.setText这个不是调用子组件下面的setText方法来把传入的值赋给loadingText嘛?那这里已经赋值成功了,为什么还需要使用watch监听再改变一次耗费性能呢?在代码中测试过了不使用watch只使用this.$refs.pullDownLoading.setText就能完成效果
    2019-12-28 14:55:30
好帮手慕糖 2019-12-28 19:01:06

同学你好,因为这个是直接传递过来的值,我们并没有改变它,所以是不会触发监听事件的。假设:如下,我们着这里换一个值(换过之后不要刷新,刷新的话,等于重新开始了,无法监听改变,换过之后下拉即可。),或者直接不传递的情况下(会采用默认值),才会触发这个监听事件。可以结合如下测试看下。

http://img1.sycdn.imooc.com//climg/5e0735670938c1ef07920090.jpghttp://img1.sycdn.imooc.com//climg/5e07356d0979f33605550115.jpg

http://img1.sycdn.imooc.com//climg/5e07358f09abaa3703970110.jpg

http://img1.sycdn.imooc.com//climg/5e07359609d1fa8507850056.jpg

但是由于这里还有在下拉的过程中还是有setText这个函数的调用,所以页面的显示效果还是会是正常的。因为我们显示到页面的是loadingText这个。

这里稍微有点绕,同学可以理下思路,测试下,结合结果来理解。

http://img1.sycdn.imooc.com//climg/5e0735b1094247de03270097.jpg

总的说就是,我们这里没改变值,没有触发监听事件,所以在同学看了是没用的。但是这里是为了防止有改变值的情况,所以才添加监听事件的。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕用0863198 #1
    我是不是可以理解为普通的调用this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START)从父组件直接改变子组件的值来改变父组件的显示,而watch的调用只是为了防止在父组件中对子组件传值的改变,这样来及时改变子组件的loadingtext值?
    2019-12-28 19:14:13
  • 好帮手慕星星 回复 提问者 慕用0863198 #2
    你好,是可以这样理解的,没有问题。祝学习愉快!
    2019-12-29 11:24:11
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师