LoginSignup
23
7

More than 3 years have passed since last update.

Vue Composition APIで$nextTick()を使う方法

Last updated at Posted at 2020-01-05

注意

この記事ではVue 3.0リリース前の「@vue/composition-api@0.3.4」を使用しています。

[2021/04/07追記]
この方法1で行っているsetupの第二引数のcontextからrootを呼び出すことは今でも動きはしますが、現在非推奨なようです。https://github.com/vuejs/composition-api/issues/28#issuecomment-802402125
現在は追記した方法3が主流なようですが自分はまだ試せておらず、Vue2系でcomposition-apiだけを入れて使っているプロジェクトに対して有効な手段かどうかは確認は出来ていません。
また、composition-apiから直接importできるらしいコメントも見られます。
https://github.com/vuejs/composition-api/issues/28#issuecomment-802615851
自分は今直接できる環境がないので、確認出来た方がいたらコメントいただけると幸いです。

方法1 context.rootから参照する

setup(_, { root }) {
  root.$nextTick(() => console.log('hi'));
}

方法2 グローバルAPIから参照する

参照
https://jp.vuejs.org/v2/api/index.html#Vue-nextTick

import Vue from 'vue'

Vue.nextTick(() => {
  window.scrollTo(0, document.body.clientHeight)
})

[2021/04/07追記]方法3 Vueからimportして使う

import { nextTick } from 'vue'

setup(_) {
  nextTick(() => console.log('hi'));
}

どっちがよいの?

このissueでvueのcoreチームのお方が、「方法2も全然悪くはないがVue3.0でどうなるかわからないので方法1の方が安全だね」とおっしゃっています。
僕は1で行きました。

23
7
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
7