Невозможно получить доступ к отдельным элементам с этим. $ Refs в Vue.js

Question

У меня странная проблема. хотел получить доступ к некоторым элементам в крюке созданного (). В частности: это у меня есть доступ к объекту ссылки:

    created() {
      console.log(this.$refs)
    }

    // returns:
    {
      bar: div.red.bar
      content: div.name-description
      description: p.description.dark
      redContainer: div.red.red-container
      sections: div.sections
      title: h1.name.dark
      __proto__: Object
    }

Но когда я пытаюсь нацелиться на определенный элемент, я получаю неопределенное:

created() {
    console.log(this.$refs.content)
  }
  
//returns

undefined

Кто-нибудь знает, почему у меня такое поведение? Аналогичные проблемы при попытке получить ширину / высоту от элементов в вычисляемых свойствах ... (например, это. $ Refs.content.clientWidth)

Answer 1

Вы не можете получить доступ к ссылкам из ловушки created, потому что дочерние компоненты / элементы еще не были созданы;вместо этого доступ с крюка mounted:

Vue.component('foo', {
  template: '<div>foo</div>',
  created() {
    console.log('foo created')
  }
})

new Vue({
  el: '#app',
  created() {
    console.log('parent created: $refs.foo is null?', this.$refs.foo == null)
  },
  mounted() {
    console.log('parent mounted: $refs.foo is null?', this.$refs.foo == null)
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <foo ref="foo"></foo>
</div>

Причина, по которой вы получаете несоответствие между выводом console.log, показывающим, что компоненты есть, но когда вы получаете доступ к одному из компонентов, это не так. возможно, потому что браузер лениво оценивает свойства this.$refs только после того, как вы щелкнете стрелку, чтобы развернуть свойства объекта, и к тому времени, когда он будет оценен, дочерние компоненты уже созданы.

Answer 2

this. $ Refs является типом объекта, когда вы выводите в созданный, он получит значение undefined, затем он получит другое значение типа объекта в смонтированном, и оба значения имеют одинаковую ссылку в памяти, либо изменены,другой изменится.