Vue API之nextTick方法

vue异步更新数据，当我们vm.someData = 'new value'时，组件并不会立即执行re-render,而是在下一次tick时更新。

如果想在数据一更新就获取最新的DOM，可用nextTick方法

作为Vue全局API 用法

<div id="app">{{message}}</div> 
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                message : '123'
            }    
        }
    });

    vm.message = 'new message' // change data
    console.log(vm.$el.textContent === 'new message') // false
    Vue.nextTick(() => {
        console.log(vm.$el.textContent === 'new message') // true
    })
</script>

作为Vue实例方法用法

<div id="app">{{message}}</div>
<button onclick="vm.updateMessage()">修改数据</button>
<button onclick="vm.updateMessagePromise()">修改数据-promise</button>
<script>


    const vm = new Vue({
        el: '#app',
        data() {
            return {
                message: 'not updated'
            }
        },
        methods: {
            updateMessage: function () {
                this.message = 'updated'
                console.log(this.$el.textContent) // => 'not updated'
                this.$nextTick(function () {
                    console.log(this.$el.textContent) // => 'updated'
                })
            },
            updateMessagePromise: async function () {
                this.message = 'updated'
                console.log(this.$el.textContent) // => 'not updated'
                await this.$nextTick()
                console.log(this.$el.textContent)  // => 'updated'
            }
        },
    });

</script>

更多文章内容 The end.