Знакомство с наблюдателями в Vue JS

Узнайте, как написать более чистый и эффективный код VueJS с помощью Watchers

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

Совет: делитесь и повторно используйте свои компоненты Vue, чтобы быстрее создавать приложения в команде. Используйте такие инструменты, как Bit (GitHub) для организации, совместного использования и повторного использования компонентов в ваших приложениях. Попробуйте.

Прежде, чем мы начнем

Этот пост подходит для всех уровней фронтенд-разработчиков, использующих Vue JS, поэтому знакомство с концепциями и процессами установки для начинающих не предполагается. Вот несколько предварительных условий, которые у вас уже должны быть, прежде чем вы начнете использовать Vue CLI 3 в рамках этой статьи.

Тебе понадобится:

• Установлен Node.js 10.x и выше. Вы можете проверить это, запустив node -v в терминале / командной строке.
• Также установлен Node Package Manager 6.7 или более поздней версии (NPM).
• Редактор кода: настоятельно рекомендуется Visual Studio Code. (Вот почему)
• Последняя версия Vue глобально установлена ​​на вашем компьютере.
• Vue CLI 3.0 установлен на вашем компьютере. Для этого сначала удалите старую версию CLI:

npm uninstall -g vue-cli

затем установите новый:

npm install -g @vue/cli

OR

• Загрузите стартовый проект Vue здесь

• Разархивируйте загруженный проект
• Перейдите в распакованный файл и запустите команду, чтобы поддерживать все зависимости в актуальном состоянии:

npm install

Что такое наблюдатели?

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

Здесь в игру вступают наблюдатели: представьте, что вы можете шпионить за свойством, которое есть в вашем компоненте Vue, а затем иметь возможность реагировать на него, когда Vue замечает изменение в указанном свойстве. Конечно, вы можете настроить обработчик событий и делать все это на обычном JavaScript, но Vue предоставляет еще более простой способ сделать это из коробки, даже не настраивая какие-либо прослушиватели событий.

Почему это важно

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

Синтаксис наблюдателя

<script>
export default {
  watch: {
  }
}
</script>

Демо: что вы будете строить

Чтобы продемонстрировать Vue JS watcher, вы создадите простую игру на счет денег. Если вы следили за этим постом с самого начала, вы, должно быть, скачали стартовый проект Vue, разархивировали его и открыли в VS Code.

Перейдите к основному файлу app.vue и удалите тег изображения, а затем откройте файл test.vue внутри папки компонентов и скопируйте этот блок кода ниже внутри него:

<template>
  <div>
    <h2>The money Game</h2>
    <p>Jack and Jill both won 2 all-access tickets to the Amusement Park </p>
       <p>They both also have $0 each in their pockets and want to play the MG</p>
    <button v-on:click="addJack()">Add $1 to Jack</button>
    <button v-on:click="addJill()">Add $1 to Jill</button>
    <p>Jack: ${{jack}}</p> <p>Jill: ${{jill}}</p>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
     jack: 0,
     jill: 0
    }
},
  methods: {
    addJack: function(){
      this.jack++;
    },
    addJill: function(){
      this.jill++;
    }
  },
  watch:{
    jack: function(){
      console.log('jack changed value');
    },
    jill: function(){
      console.log('jill changed value');
    }
  }
  
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
button {
    background-color: rgb(58, 128, 194); 
    border: none;
    color: white;
    padding: 15px 32px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
  }
</style>

Внутри блока кода, выделенного жирным шрифтом, вы можете увидеть, как можно установить наблюдателей. Здесь свойства jack и jill настроены так, чтобы за ними шпионили. Наблюдатели позволяют вам определять логику внутри функций для этих шпионских операций, позволяя им принимать два аргумента: oldValue и newValue. Чтобы проверить эти аргументы, измените блок кода просмотра в файле test.vue на следующий:

watch:{
    jack: function(newValue, oldValue){
      console.log('jack had an old balance of $'+ oldValue);
    },
    jill: function(newValue, oldValue){
      console.log('jill had an old balance of $'+ oldValue);
    }
  }

Вы можете повторно запустить свое приложение с помощью команды сервера разработки vue:

npm run serve

Абстрагирование от метода жизненного цикла

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

Скажем, в нашем примере, Джек и Джилл уже получили по 1 доллару каждый, прежде чем вы сможете начать игру на деньги, это может быть хорошим вариантом использования для вызова функции при инициализации. Измените раздел сценария файла test.vue на блок кода ниже:

<script>
export default {
  name: 'Test',
  data() {
    return {
     forceJack: '',
     forceJill: '',
     jack: 0,
     jill: 0
    }
},
  methods: {
    addJack: function(){
      this.jack++;
    },
    addJill: function(){
      this.jill++;
    }
  }
  ,
  watch:{
    jack: function(newValue, oldValue){
      console.log('jack had an old balance of $'+ oldValue);
    },
    jill: function(newValue, oldValue){
      console.log('jill had an old balance of $'+ oldValue);
    },
    forceJack: {
      handler: 'addJack', 
      immediate: true
    },
    forceJill: {
      handler: 'addJill', 
      immediate: true
    }
  }
  
}
</script>

Чтобы настроить абстракцию, вам нужно будет сделать наблюдателя объектом, а затем предоставить объекту два свойства:

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

Заключение

Вы познакомились с концепцией шпионажа за собственностью в Vue JS, называемой наблюдателями. Вам также показали, как можно настроить наблюдатели и как сделать их абстракциями созданного метода жизненного цикла. Удачного взлома!

Учить больше