vue2.0$nextTick监听数据渲染完成之后的回调函数方法

Vue.js 2.0中提供了 $nextTick 方法来在 DOM 更新完成之后执行回调函数。这个方法可以用来解决在特定情况下数据渲染后无法获取到更新后的DOM元素的问题。

方法原理

在 Vue.js 中，数据渲染是异步的。当我们修改了数据后，Vue.js 会在下一个 tick 中更新实例，更新完成后才会执行回调函数。$nextTick 方法就是用来等待数据更新完成后执行回调函数的。

方法定义

$nextTick 方法定义在 Vue.js 实例对象中，我们可以通过实例对象来调用该方法。

vm.$nextTick(callback)

其中 callback 是我们要执行的回调函数。

用法示例

下面我们来看两个 $nextTick 方法的用法示例。

示例一

HTML 代码：

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
</div>

Vue.js 代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'Hello, World!';
      this.$nextTick(function() {
        console.log('Message Changed!');
      });
    }
  }
});

在这个示例中，我们在组件中定义了一个 message 数据属性和一个 changeMessage 方法。当我们点击按钮时，调用了 changeMessage 方法，该方法会修改 message 的值，然后调用 $nextTick 方法执行回调函数。回调函数中输出 Message Changed!。

示例二

HTML 代码：

<div id="app">
  <p v-for="item in items">{{ item }}</p>
  <button @click="addItem">Add Item</button>
</div>

Vue.js 代码：

var app = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Orange']
  },
  methods: {
    addItem: function() {
      this.items.push('Grape');
      this.$nextTick(function() {
        var ps = document.querySelectorAll('#app p');
        console.log(ps[ps.length - 1]);
      });
    }
  }
});

在这个示例中，我们在组件中定义了一个 items 数据属性和一个 addItem 方法。当我们点击按钮时，调用了 addItem 方法，该方法会向 items 数组新增一项，然后调用 $nextTick 方法执行回调函数。回调函数中获取到新增的 p 元素并输出到控制台。