Vue.js使いだして２年くらい経ったけど、使ったことないAPIを使ってみる「グローバルAPI」(1/2)

Vue.nextTick( [callback, context] )

const vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  }
})

vm.msg = 'Hello'
console.log(vm.$el.clientHeight) // 0
Vue.nextTick().then(() => {
  console.log(vm.$el.clientHeight) // 24
})

要素の高さを取得したいときなどに使える。

Vue.set( target, key, value )

const vm = new Vue({
  el: '#app',
  data: {
    error: {}
  }
})

vm.error.msg = 'Hello' // NG:リアクティブではない
Vue.set(vm.error, 'msg', 'Hello') // OK:プロパティの追加でもリアクティブに反応する

Vue.delete( target, key )

これは主に Vue がプロパティの削除を検知できないという制約を回避するために使われますが、使う必要があることはまれです。

全然思いつかないので、使い方は知らなくていいか、、、

Vue.directive( id, [definition] )

Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

<input v-focus>

inserted以外のタイミングとして

• bind
• update
• componentUpdated
• unbind

がある。

v-my-showの実装

const updateDisplay = (el, binding) => {
  if (!!binding.value === true) {
    el.style.dispaly = 'inline'
  } else {
    el.style.display = 'none'
  }
}

Vue.directive('my-show', {
  bind: updateDisplay,
  update: updateDisplay
})