vue中的watch

一、背景

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

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的细节