In which lifecycle hook should the screen size check be done?

Question

Vue.js

I want to add a class to an element on a mobile phone, how to do it right?

Answer 1

Looking what logic follows after check.
And somounted

mounted() {
  this.$nextTick(function () {
    // код будет вызван после того как будут отрисованы все дочерние компоненты
  })
}

Answer 2

On any. You need a prototype\plugin\global mixin extension that will take care of this itself, and in the component just use it.
It makes no sense to write this logic in one component, because it will definitely be needed in another.
For example .
If you really want to, then you createdhang the handler on resize(or better mediaQuery addListener\ onchangetime you have a specific breakpoint), destroyedyou must remove the handler on. The handler itself sets some variable in data.

Answer 3

You should use CSS media queries .
It's good when the JS code is preparing data for display and processing it after user input, but knows nothing about how exactly this data will be displayed.