Vue界面更新数据渲染

1. 业务需求

在页面中，数据通过异步获取，但是有的方法或者第三方组件的加载，例如Swiper加载时需要数据已经渲染完成才能渲染组件效果。

2. 解决方式

此时vue的api中提供了，页面数据获取完成，监听数据改变，并当数据改变后，渲染到页面的回调函数。

3. 介绍nextTick

3.1 在监听中使用的方式

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

watch: {
            //监听哪一个，名字就是哪一个
            category(value) {
                //该函数调用，表示值发生改变，然后再异步更新界面
                // 可以使用setTimeout，自定义延时，进行实现
                //保证页面加载完成，创建一个Swiper实例对象，来实现轮播
                /*setTimeout(() => {
                    new Swiper('.swiper-container', {
                        loop: true,//循环轮播
                        pagination: {
                            el: '.swiper-pagination'
                        },
                    });
                }, 100)*/

                // 界面更新就立即通知
                this.$nextTick(() => {//一旦界面完成更新，立即调用该方法(此语句写在数据更新之后)
                    //保证页面加载完成，创建一个Swiper实例对象，来实现轮播
                    new Swiper('.swiper-container', {
                        loop: true,//循环轮播
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        }
                    })
                })
            }
        }

3.2 在monted中使用的方式

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}