СТАТЬЯ

Изучение событий обновления с помощью вычисленных свойств в Vue.js

Из Vue.js в действии Эрика Ханчетта и Бенджамина Листвона
___________________________________________________________________

Сэкономьте 37% на Vue.js в действии.
Просто введите код fcchanchett в поле кода скидки при оформлении заказа на manning.com.
___________________________________________________________________

Поскольку вычисляемые свойства обычно вычисляются с использованием данных экземпляра, их возвращаемое значение обновляется автоматически при изменении базовых данных. Любая разметка представления, привязанная к вычисляемому свойству, также обновляется, чтобы отразить новое значение.

Такое поведение лежит в основе цикла обновления в рамках более крупного жизненного цикла экземпляра Vue - давайте посмотрим ...

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

Листинг 1. Вычисление площади прямоугольника - chapter-03 / computed-rect.js

new Vue({    
  data: {      
    length: 5,                             ❶       
    width: 3                               ❶     
  },    
  computed: {      
    area: function() {                     ❷         
      return this.length * this.width;     ❷       
    }                                      ❷     
  }  
});

❶ Объект данных, содержащий свойства длины и ширины

❷ Вычисляемое свойство показывает площадь так же, как свойство данных

Вычисляемое свойство area имеет начальное значение 15. Любое последующее изменение length или width запускает серию обновлений в приложении.

  1. Когда значение length или width изменяется…
  2. Вычисленное свойство area пересчитывается, затем…
  3. Любая разметка, связанная с этими свойствами, обновляется.

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

ИНФОРМАЦИЯ. Функция наблюдения работает как ловушка жизненного цикла, но срабатывает при обновлении данных, которые она «просматривает». Мы даже можем создать функцию наблюдения для наблюдения за вычисляемым свойством.

В листинге 2 наш расчет площади рассматривается в контексте всего приложения. Приложение также содержит три функции слежения, которые записывают сообщения на консоль при изменении length, width или area, и одну функцию для регистрации, когда начинается цикл обновления. Эти функции должны быть указаны в опции наблюдения экземпляра Vue, чтобы они работали.

СОВЕТ Вы можете найти код для этого листинга в примерах, прилагаемых к этой статье, в файле chapter-03 / area.html. Он полностью автономен, и вы можете открыть его прямо в Chrome.

Листинг 2 Вычисляемые свойства и регистрация событий обновления - chapter-03 / area.html

<html>
 <head>
   <title>Calculating Area - Vue.js in Action</title>
   <script src="https://unpkg.com/vue/dist/vue.js"
     type="text/javascript"></script>
 </head>
 <body>
   <div id="app">
     <p>
       Area is equal to: {{ area }}                             ❶ 
     </p>
     <p>
       <button v-on:click="length += 1">Add length</button>     ❷ 
       <button v-on:click="width += 1">Add width</button>       ❷ 
     </p>
   </div>
   <script type="text/javascript">
     var app = new Vue({
       el: '#app',
       data: {
         length: 5,                                             ❸ 
         width: 3                                               ❸ 
       },
       computed: {
         area: function() {                                     ❹ 
           return this.width * this.length;                     ❹ 
         }                                                      ❹ 
       },
       watch: {
         length: function(newVal, oldVal) {                     ❺ 
           console.log('The old value of length was: '          ❺ 
                       + oldVal +                               ❺ 
                       '\nThe new value of length is: '         ❺ 
                       + newVal);                               ❺ 
         },
         width: function(newVal, oldVal) {                      ❻ 
           console.log('The old value of width was: '           ❻ 
                       + oldVal +                               ❻ 
                       '\nThe new value of width is: '          ❻ 
                       + newVal);                               ❻ 
         },
         area: function(newVal, oldVal) {                       ❼ 
           console.log('The old value of area was: '            ❼ 
                       + oldVal +                               ❼ 
                       '\nThe new value of area is: '           ❼ 
                       + newVal);                               ❼ 
         }
       },
       beforeUpdate: function() {                               ❽ 
         console.log('All those data changes happened '         ❽ 
                     + 'before the output gets updated.');      ❽ 
       }
     });
   </script>
 </body>
 </html>

❶ Привязка данных, отображающая значение площади

❷ Кнопки, увеличивающие значение длины или ширины на 1 соответственно

❸ Исходные значения длины и ширины

❹ Свойство вычисленной площади

❺ Функция, которая регистрирует изменение длины

❻ Функция, которая регистрирует изменение ширины

❼ Функция, которая регистрирует изменение площади

❽ функция перехвата жизненного цикла beforeUpdate

Когда вы загрузите этот файл в Chrome, вы увидите начальное значение area, равное 15.

Убедитесь, что консоль JavaScript открыта, затем попробуйте нажимать кнопки, чтобы запустить цикл обновления. Консоль должна регистрировать сообщения о данных приложения при нажатии кнопок «Добавить длину» и «Добавить ширину».

Теперь, когда мы увидели, как ведет себя приложение, мы можем отобразить данные и функции из листинга 2 на нашу диаграмму цикла обновления.

И последнее, что следует отметить: если вы удалите {{ area }} привязку из примера кода и перезагрузите страницу в браузере, вы увидите разницу в выводе консоли при нажатии любой кнопки.

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

Вот как работает цикл обновления Vue!

___________________________________________________________________

Чтобы узнать больше о Vue.js в действии, прочтите первую бесплатную главу здесь и посмотрите эту колоду слайдов.
___________________________________________________________________

Об авторах:

Эрик Ханчетт - разработчик программного обеспечения, который любит все, что связано с JavaScript. Бенджамин Листвон - опытный дизайнер и разработчик, живущий в Сиэтле.

Первоначально опубликовано на freecontent.manning.com.