Question

正如docs所述，我需要使用nextTick确认$el准备就绪，但在另一个page中，它大致意味着$el已准备就绪mounted {1}}打来电话。那么，为什么需要在使用挂钩时使用nextTick？

Answer 1

我相信在调用el挂钩时确实会挂载mounted。 nextTick的实际用途描述为here。它主要用于在代码中更改影响DOM的内容后立即需要直接DOM访问（不建议使用btw）。检查此代码：

new Vue({
  el: '#app',
  data: {
    text: 'one'
  },
  components: {
    'child' : {
      template: `<p>{{ text }}</p>`,
      props: ['text']
    }
  },
  mounted: function() {
    console.log(document.querySelector('p').textContent); // 'one'
    this.text = 'two'; // assign new value
    console.log('after text has changed: ');
    console.log(document.querySelector('p').textContent); // still 'one'
    this.$nextTick(function() {
      console.log('nextTick: ', document.querySelector('p').textContent); // now 'two' after 'nextTick'
    })
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child :text="text"></child>
</div>

所以，我认为迁移文档在这种情况下会产生误导。

在vuejs中，为什么我需要在使用挂钩时使用nextTick？

1 个答案: