Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим альтернативные способы определения шаблонов и управления обновлениями.

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

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

Когда атрибут inline-template присутствует в дочернем компоненте, компонент будет использовать его внутреннее содержимое в качестве своего шаблона, а не рассматривать его как распределенное содержимое.

Однако объем данных, доступных внутри, может сбить с толку, поскольку у нас есть доступ к области дочернего компонента, а не к родительскому компоненту внутри тегов.

Например, если у нас есть:

src/index.js :

Vue.component("bar", {
  data() {
    return {
      baz: "bar"
    };
  },
  template: `
    <p></p>
  `
});
new Vue({
  el: "#app",
  data: {
    foo: "foo"
  }
});

index.js :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <bar inline-template>
        <div>
          {{baz}}
        </div>
      </bar>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Тогда {{bar}} ссылается на baz из bar компонента. Он также переопределяет шаблон, который мы определили в bar.

X-шаблоны

Другой способ определения шаблонов - использовать тег script с типом text/x-template. Затем на него можно ссылаться с помощью идентификатора.

Например, мы можем написать:

src/index.js :

Vue.component("hello", {
  data() {
    return {
      hello: "hello"
    };
  },
  template: "#hello-template"
});
new Vue({
  el: "#app",
  data: {
    foo: "foo"
  }
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <script type="text/x-template" id="hello-template">
      <p>{{hello}}</p>
    </script>
    <div id="app">
      <hello></hello>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Код:

<script type="text/x-template" id="hello-template">
  <p>{{hello}}</p>
</script>

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

template: "#hello-template"

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

Контроль обновлений

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

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

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

В тех маловероятных случаях мы можем использовать $forceUpdate.

Используйте v-once для рендеринга статических компонентов

Мы можем использовать v-once для кеширования статического содержимого после его визуализации. Это полезно для страниц с большим количеством статического контента.

Например, мы можем использовать это так:

src/index.js :

Vue.component("hello", {
  template: `
    <div v-once>hello</div>
  `
});
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <hello></hello>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

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

Это может вызвать проблемы, если мы захотим отображать динамический контент позже и когда разработчики не знакомы с v-once работой над кодом. Они могут быть сбиты с толку относительно того, почему компонент не обновляется.

Заключение

Мы можем определять шаблоны внутри компонента с атрибутом inline-template или с помощью элемента script с типом text/x-template.

Затем мы можем ссылаться на него по его идентификатору в коде нашего компонента.

Мы можем использовать $forceUpdate для принудительного обновления и v-once для кэширования содержимого после его визуализации, что может быть полезно для статического содержимого. Однако их не следует использовать почти все время.