深入响应式原理-异步更新队列

àì夳堔傛蜴生んèń 2022-03-19 15:46 124阅读 0赞

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 `Vue.nextTick(callback)` 。这样回调函数在 DOM 更新完成后就会调用

1、

2、在组件内使用 `vm.$nextTick()` 实例方法特别方便，因为它不需要全局 `Vue` ，并且回调函数中的 `this` 将自动绑定到当前的 Vue 实例上

3、总结

this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势

4、参考[http://www.cnblogs.com/chaoyuehedy/p/8985425.html][http_www.cnblogs.com_chaoyuehedy_p_8985425.html]

### 简介 ###

vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。

### 为什么要用nextTick ###

new Vue({
      el: '#app',
      data: {
        list: []
      },
      mounted: function () {
        this.get()
      },
      methods: {
        get: function () {
          this.$http.get('/api/article').then(function (res) {
            this.list = res.data.data.list
            // ref  list 引用了ul元素，我想把第一个li颜色变为红色
            this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
          })
        },
      }
    })

我在获取到数据后赋值给数据模型中list属性，然后我想引用ul元素找到第一个li把它的颜色变为红色，但是事实上，这个要报错了，我们知道，在执行这句话时，ul下面并没有li，也就是说刚刚进行的赋值操作，当前并没有引起视图层的更新。因此，在这样的情况下，vue给我们提供了$nextTick方法，如果我们想对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，vue就会给我们做这个工作。

[http_www.cnblogs.com_chaoyuehedy_p_8985425.html]: http://www.cnblogs.com/chaoyuehedy/p/8985425.html