Обработка краевых чехлов

Последнее обновление 12 июля 2019 12:07:33 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Этот учебник документирует обработку крайних случаев, это означает необычные ситуации, которые иногда требуют небольшого отклонения от правил Vue. Однако все эти крайние случаи имеют недостатки или ситуации, когда они могут быть опасными.

Доступ к элементам и компонентам

В большинстве случаев лучше избегать попадания в другие экземпляры компонентов или манипулирования элементами DOM вручную. Однако бывают случаи, когда это может быть уместно.

Доступ к корневому экземпляру

Доступ к корневому экземпляру можно получить с помощью свойства $ root в каждом подкомпоненте нового экземпляра Vue:

new Vue({
  data: {
    foo: 1
  	}
       })

Затем все подкомпоненты могут получить доступ к экземпляру и использовать его в качестве глобального хранилища. Это также применимо для вычисляемых свойств и методов.

this.$root.foo

Тем не менее, мы рекомендуем использовать Vuex для управления изменениями состояния.

Доступ к родительскому экземпляру компонента

Как и $ root, свойство $ parent можно использовать для доступа к родительскому экземпляру от дочернего элемента. Это ленивая альтернатива использованию реквизита для передачи данных.

Однако в тех случаях, когда у нас есть общие библиотеки, это может быть уместно. Например, когда абстрактные компоненты взаимодействуют с API-интерфейсами JavaScript, а не визуализируют HTML:

<google-map>
  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
</google-map>

Компонент <google-map> может определять свойство карты, к которому имеют доступ все подкомпоненты. <Google-map-markers> может захотеть получить доступ к этой карте с помощью этого. $ Parent.getMap, чтобы добавить к нему набор маркеров. Вместо этого рекомендуется использовать внедрение зависимостей.

Доступ к дочерним экземплярам компонентов и дочерним элементам

Иногда нам нужно получить доступ к дочернему компоненту напрямую в JavaScript, несмотря на существование событий и подпорок. Это достигается с помощью идентификатора ссылки на дочерний компонент с помощью атрибута ref.

И затем в компоненте, где мы определили эту ссылку, мы можем использовать:

это. $ refs.usernameInput

чтобы получить доступ к экземпляру <base-input>.

Внедрение зависимости

Рассмотрим фрагмент кода ниже:

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

Где все потомки нужен доступ к методу getMap, чтобы узнать, с какой картой нужно взаимодействовать.

Использование свойства $ parent плохо масштабируется для более глубоко вложенных компонентов, поэтому нам нужно внедрение зависимостей. При этом используются две новые опции экземпляра: отклонить и предоставить.

Опции обеспечения позволят нам указать данные / метод, которые мы хотим предоставить дочерним компонентам. В нашем случае мы хотим предоставить метод getMap внутри <google-map>:

Теперь в любых потомках мы можем использовать опцию inject для получения определенных свойств, которые мы хотели бы добавить в интерфейс:

inject: ['getMap']

Слушатели программных событий

До сих пор мы слушали с директивой v-on, мы видели использование $ emit, но экземпляры Vue предлагают больше методов, чем они в его интерфейсе событий. тогда мы можем:

Прослушивание события с использованием $ on (eventName, eventHandler)
Прослушивание события только один раз с использованием $ Once (eventName, eventHandler)
Прекратить прослушивание события, используя $ off (eventName eventHandler)

Они доступны для случаев, когда нам нужно вручную прослушивать события в экземпляре компонента, как в случае ниже:

mounted: function () {
  this.picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })
},
beforeDestroy: function () {
  this.picker.destroy()
}

Есть две потенциальные проблемы, связанные с этим:

Это потребует сохранения средства выбора в экземпляре компонента, хотя возможно, что доступ к нему имеют только хуки жизненного цикла. Это не так страшно, но, тем не менее, это можно считать беспорядком.
Наш установочный код будет храниться отдельно от нашего кода очистки, что затруднит программную очистку всего, что мы настроили.

Обе проблемы решаются с помощью программного слушателя.

Циркулярные ссылки

Рекурсивные компоненты

Компоненты могут вызывать себя в своем собственном шаблоне рекурсивно. Но это можно сделать только с помощью опции name:

name: 'unique-name-of-my-component'

Когда мы регистрируем компонент глобально, используя Vue.component, глобальный идентификатор будет автоматически установлен как опция имени компонента. Если мы не будем осторожны, рекурсивные компоненты также могут привести к бесконечным циклам:

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

Всегда проверяйте, чтобы рекурсивный вызов был условным, чтобы избежать «ошибки превышения максимального размера стека».

Циркулярные ссылки между компонентами

Возьмите сценарий, в котором вы строите дерево каталогов файлов (проводник). У вас может быть компонент дерева папок с этим шаблоном:

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

И компонент дерева-папки-содержимого с шаблоном выше:

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

Присмотревшись, мы увидим, что эти компоненты будут потомками и предками друг друга в дереве визуализации - это парадокс, который автоматически разрешается при глобальной регистрации компонентов с помощью Vue.component. Однако если нам потребуется / импортировать компоненты с использованием системы модулей, мы получим ошибку:

 Не удалось смонтировать компонент: шаблон или функция визуализации не определены.

Чтобы устранить ошибку, мы можем использовать асинхронный импорт Webpack при локальной регистрации компонентов:

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

Или подождите, пока beforCreate перехватит жизненный цикл, чтобы зарегистрировать компонент tree-folder-contents:

Альтернативные определения шаблона

Встроенные шаблоны

Всякий раз, когда специальный атрибут встроенного шаблона присутствует в дочернем компоненте, этот компонент будет использовать свое внутреннее содержимое в качестве шаблона, а не обрабатывать его как распределенное содержимое.

X-шаблоны

Альтернативный способ определения шаблонов - определить их внутри элемента script с типом text / x-template, а затем сослаться на шаблон по id.

Управление обновлениями

С системой реактивности Vue Vue знает, когда обновлять (при правильном использовании). Хотя есть время, вы захотите, чтобы заставить обновления.

Принудительное обновление

Примечание: 99,99% случаев, когда вы чувствуете необходимость принудительного обновления; Вы ошиблись где-то.

Но если вы уверены, что не допустили ошибку, тогда вы можете принудительно обновить с помощью $ forceUpdate.

Дешевые статические компоненты с V-Once

Когда мы визуализируем HTML в Vue, это очень быстро, но бывают случаи, когда у нас есть компоненты, которые имеют много статического содержимого. Мы можем гарантировать, что это оценивается один раз, а затем кэшируется. Это делается путем добавления директивы v-Once к корневому элементу.