码迷,mamicode.com
首页 > 其他好文 > 详细

vue中的watch

时间:2021-06-02 20:56:22      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:实战   textarea   sdn   segment   一些事   背景   art   font   详细   

一、背景

在进行前端开发的时候,需要对数据的创建,加载,变化,销毁进行监听,这些都需要涉及到生命周期,也是框架开发非常重要的一环。这里总结一下实战中可能会遇到的问题

1.为避免相同操作,引发错误,需要锁定一些事件。(比如锁定发送状态)
2.在某些数据执行完成之后才会执行其他操作。(比如渲染完数据在执行操作)

二、问题与解决

2.1 问题

在异步数据渲染的时候,只有数据全部渲染完成,再来执行样式操作,以达到动画的效果。比如我需要字体一个一个浮动,值得注意的是动画一般比业务逻辑消耗的资源更多,因此实现的时候更为麻烦。

2.2 解决

vue中通过watch监听数据的变化,只有执行完成之后才会执行其他操作。这里需要用到的两个,vue中的watch,以及$nextTick函数的操作。

    watch: {
        textarea: function () {
            // 当数据渲染完成之后在执行的操作
            this.$nextTick(
                function () {
                    this.showDown();
                },
            )
        },
    }

三、拓展

这里只是简单的介绍了一下方法,通过上述的方法配合一些样式可以实现数据的动画展示,更加详细的介绍可以通过参考里面的blog获取。

参考

CSDN:watch的参数介绍

CSDN:数据监测

CSDN:watch监听问题

思否:computed和watch的细节

vue中的watch

标签:实战   textarea   sdn   segment   一些事   背景   art   font   详细   

原文地址:https://www.cnblogs.com/future-dream/p/14791270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!