当前位置 : 主页 > 网络安全 > 测试自动化 >

vue-learning:11 - nextTick()

来源:互联网 收集:自由互联 发布时间:2021-06-22
nextTick() 在jQuery中,如果我们要生成一个ul-li的列表元素,我们也不会在循环体中每生成一个li就将它插入到ul中,而是在循环体内拼接每个li,待循环体结束后,再一并添加到ul元素上进行

nextTick()

在jQuery中,如果我们要生成一个ul-li的列表元素,我们也不会在循环体中每生成一个li就将它插入到ul中,而是在循环体内拼接每个li,待循环体结束后,再一并添加到ul元素上进行视图渲染。这样是为了避免页面不断的进行重排和重绘,优化页面性能。

var list = [1,2,3,4,5,6]

// bad
for (var i = 0; i < list.length; i++) {
    $("<li></li>").text(list[i]).appendTo("#one")
}

// good
var temp = ""
for (var i = 0; i < list.length; i++) {
    temp += `<li>${list[i]}</li>`
}
$("#two").append(temp)

同样,在Vue中,不可能监控到一个数据更新就马上去刷新视图,而是异步执行 DOM 更新。

当观察到数据变化,Vue 会开启一个队列,用来缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。然后,在下一个的事件循环前的“tick”中,Vue 再使用刷新后队列中的数据去执行渲染工作。这种使用队列并在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的,很大的提升了页面性能。

所以当我们在this.someData = newValue时,并没有马上在页面中渲染newValue。所以如果此时我们从DOM元素中获取相应的值是没有改变的。

<div id="tick">
    <p ref="msg">{{ msg }}</p>
    <button @click="updateMsg">更新msg</button>
</div>
var vm = new Vue({
    el: "#tick",
    data: {
        msg: 123
    },
    methods: {
        updateMsg() {
            this.msg = 456;
            console.log("this.msg",this.msg) // 456 数值是已更新
            console.log("msg.textContent", this.$refs.msg.textContent) // 123 视图未更新
        }
    }
})

如果实际需求确实需要操作数据变化后相关的DOM,VUE提供了nextTick( callback )方法来执行DOM渲染完成后的回调。可以使用全局的Vue.nextTick( callback ),也可以使用实例对象的提供的this.$nextTick( callback )

上面的例子改写下:

var vm = new Vue({
    el: "#tick",
    data: {
        msg: 123
    },
    methods: {
        updateMsg() {
            this.msg = 456;
            console.log("this.msg",this.msg) // 456 数值是已更新
            console.log("msg.textContent", this.$refs.msg.textContent) // 123 视图未更新
            this.$nextTick(() => {
                console.log("nextTick", this.$refs.msg.textContent) // 456 此时视图已更新
            })
        }
    }
})

现在,回头再仔细回味下解释vue文档中的异步更新队列中这段解释:

只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

同一个数值在同一事件中被多次改变,队列中只会保留最后值用来执行视图更新,并且执行页面渲染时机是当前事件执行结束后。

我们验证下:

var vm = new Vue({
    el: "#tick",
    data: {
        msg: 123
    },
    methods: {
        updateMsg() {
            this.msg = 456;
            console.log("first_this.msg",this.msg)
            console.log("first_this.$refs.msg.textContent", this.$refs.msg.textContent)
            this.$nextTick(() => {
                console.log("first_nextTick", this.$refs.msg.textContent)
            })

            for (let i=0; i < 5000; i++) {
                console.log('i')
            }

            this.msg = 789;
            console.log("second_this.msg",this.msg)
            console.log("second_this.$refs.msg.textContent", this.$refs.msg.textContent)
            this.$nextTick(() => {
                console.log("second_nextTick", this.$refs.msg.textContent)
            })
        }
    }
})
first_this.msg 456
first_this.$refs.msg.textContent 123
5000 i
second_this.msg 789
second_this.$refs.msg.textContent 123
first_nextTick 789
second_nextTick 789

观察页面,并没有出现456后再变成789,而是直接变成789,两次的赋值只取了最后一次数值用来渲染,并且两次nextTick回调打印的都是同一个值。所以页面的渲染是在整个updateMsg事件执行后进行的。

上一篇:存储管理
下一篇:本地缓存Caffeine
网友评论