Обзор методов, вычислений и слушателей в Vue

внешний интерфейс JavaScript Vue.js

Добро пожаловать в команду веб-разработчиков Futu,несоответствие

В последнее время переключаюсь между Vue и angualr.js 1.x. Мозг не может переключиться.

Воспользуйтесь выходными, чтобы ознакомиться с основами Vue.

Посмотреть исходный текстСвязь

текст

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

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

  • Методы: как следует из названия, это означает метод. Эти методы являются функциями, которые работают с объектами — обычно с самим экземпляром Vue или компонентом Vue.

  • Вычисляемые: эти вычисляемые свойства на первый взгляд могут выглядеть как используемые методы, но это не так. В Vue нам нужно использоватьdataЧтобы реагировать на изменение, мы хотим, чтобы конкретное свойство. Вычисляемые свойства могут не только определятьdataСвойства используются таким же образом и могут иметь некоторую пользовательскую логику для кэширования на основе их зависимостей. Вы можете думать о вычисляемых свойствах как о другом представлении данных.

  • Наблюдатели (слушатели): Слушатели могут следить за изменениями данных. Мы предоставляем несколько функций-ловушек для мониторинга некоторых свойств, хранящихся в Vue. Если вы хотите добавить некоторую функциональность при изменении данных или реагировать на какие-то конкретные изменения, мы можем прослушивать это свойство и применять некоторую логику. Это означает, что имя слушателя должно соответствовать тому, что мы слушаем.

Если это звучит для вас запутанно, не волнуйтесь! Мы рассмотрим больше ниже в надежде ответить на ваши вопросы. Если вы уже знакомы с ванильным Javascript, то, если не считать одного или двух предостережений, для вас более важен метод. это может заставить вас пропуститьComoutedа такжеWatchersэти две части.

Методы

方法Вероятно, что-то, что вы часто используете при использовании Vue. По сути, это то, что мы прикрепляем к объекту какие-то методы функции, поэтому он по сути и называется так. Это очень полезно для подключения функций к директивам событий или даже для создания небольшой части логики, которую можно использовать повторно, как и любую другую функцию. Например, вы можете вызвать метод внутри другого метода. Вы также можете вызвать этот метод в функции ловушки жизненного цикла. Это очень гибко.

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

//HTML
<code class="language-css"><div id="app">
  <button @click="tryme">Try Me</button>
  <p>{{ message }}</p>
</div>

//JS
new Vue({
  el: '#app',
  data() {
    return {
      message: null
    }
  },
  methods: {
    tryme() {
      this.message = Date()
    }
  }
})

Мы также можем реализовать эту логику непосредственно в самой инструкции, как в<button @click="message = Date()">Try Me</button>Это очень хорошо работает на небольших примерах. Однако по мере того, как приложения становятся более сложными, становится яснее, что описанный выше общий подход состоит в том, чтобы разбить его на части. Существуют ограничения на то, как Vue позволяет вам выражать логику в директивах — например, выражения могут, но не операторы.

Вы можете заметить, что мы можем получить доступ к этому методу в компоненте или экземпляре Vue и вызвать любой фрагмент данных, в данном случае этоthis.messageВам не нужно использовать такие методы, как вызов функций в директивах. Например: не надо этого@click=”methodName()”, если вы не хотите передавать такой параметр@click=”methodName(param)”.

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

//HTML
<form v-on:submit.prevent="onSubmit"></form>

Есть чему поучиться.

Вычислено

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

Некоторые распространенные сценарии, такие как:

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

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

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

Если нам нужно отфильтровать список этих людей на основе того, что набрал пользователь, как мы это сделаем. Чтобы это выглядело проще, вы можете сократить некоторые основные понятия. Во-первых, данные списка будут выводить имена, хранящиеся в данных в шаблоне:

//JS
new Vue({
  el: '#app',
  data() {
    return {
      names: [
        'Evan You',
        'John Lindquist',
        'Jen Looper',
        'Miriam Suzanne',
        ...
      ]
    }
  }
})

//HTML
<div id="app">
  <h1>Heroes</h1>
  <ul>
    <li v-for="name in names">
      {{ name }}
    </li>
  </ul>
</div>

Увидеть эффектСвязь

Теперь давайте создадим фильтр для этих имен. Сначала мы создаемv-modelinput, который изначально является пустой строкой, но мы будем использовать ее для сопоставления и фильтрации нашего списка. мы позвонимfindNameС помощью этого свойства вы можете ввести иdataсм. эту ссылку.

//HTML
<label for="filtername">Find your hero:</label>
<input v-model="findName" id="filtername" type="text" />

//JS
data() {
  return {
    findName: '',
    names: [
      'Evan You',
      'John Lindquist',
      ...
    ]
  }
}

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

//JS
computed: {
  filteredNames() {
    let filter = new RegExp(this.findName, 'i')
    return this.names.filter(el => el.match(filter))
  }
}

Теперь мы обновим вывод контента, используемый в шаблоне:

//HTML
<ul>
  <li v-for="name in names">
    {{ name }}
  </li>
</ul>

стать таким

//HTML
<ul>
  <li v-for="name in filteredNames">
    {{ name }}
  </li>
</ul>

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

Эффект следующийСвязь

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

Наблюдатели (слушатели)

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

Наблюдатели также позволяют нам писать более декларативный код. Вам не нужно следить за всем. Vue уже делает это, поэтому вы можете получить доступ к изменениям любого свойства, которое он отслеживает, например:data,computedилиprops.

Слушатели отлично подходят для выполнения логики, которая применяется к чему-то другому при изменении одного свойства (впервые я услышал об этом отChris FritzТам он сказал, что слышал это и от других ☺️) Это не сложный принцип — вы можете полностью использовать слушателя для ссылки на логику самого свойства, но это хороший способ определить разницу между слушателем и путь вычисляемого свойства, когда ссылочное свойство, которое мы собираемся использовать, изменяется.

Давайте посмотрим на простейший пример, чтобы увидеть, что здесь происходит.

ссылка на видео

//JS
new Vue({
  el: '#app', 
  data() {
    return {
      counter: 0
    }
  },
  watch: {
    counter() {
      console.log('The counter has changed!')
    }
  }
})

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

Избыточное состояние наблюдателей

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

SVG также используется для таких сценариев, поскольку он также построен с использованием математики.

Ссылка на эффект

//JS
watch: {
  selected: function(newValue, oldValue) {

    var tweenedData = {}

    var update = function () {
      let obj = Object.values(tweenedData);
      obj.pop();
      this.targetVal = obj;
    }

    var tweenSourceData = { onUpdate: update, onUpdateScope: this }

    for (let i = 0; i < oldValue.length; i++) {
      let key = i.toString()
      tweenedData[key] = oldValue[i]
      tweenSourceData[key] = newValue[i]
    }

    TweenMax.to(tweenedData, 1, tweenSourceData)
  }
}

Что тут происходит?

  • Сначала мы создаем фиктивный объект, который будет обновляться по мере изменения библиотеки анимации.

  • Затем у нас есть обновленная функция, которая вызывает эту функцию на этапе анимации. Мы используем это для отправки данных.

  • Затем мы создаем объект для хранения метаданных и функцию для обновления события.

  • Мы создаем цикл for, а затем превращаем текущий индекс в строку.

  • Затем мы можем выполнить анимацию на целевом манекене, но мы сделаем это только для определенных ключевых точек.

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

Ссылка на эффект

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

//JS
watch: {
  checked() {
    let period = this.timeVal.slice(-2),
      hr = this.timeVal.slice(0, this.timeVal.indexOf(':'));

    const dayhr = 12,
      rpos = 115,
      rneg = -118;

    if ((period === 'AM' && hr != 12) || (period === 'PM' && hr == 12)) {
      this.spin(`${rneg - (rneg / dayhr) * hr}`)
      this.animTime(1 - hr / dayhr, period)
    } else {
      this.spin(`${(rpos / dayhr) * hr}`)
      this.animTime(hr / dayhr, period)
    }

  }
},

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

Вы можете видеть, что слушатели могут быть очень полезны для всего, что обновляется в режиме реального времени — будь то ввод в форму, асинхронные обновления или анимация. Если вам интересно, как это делает Vue, тоЭта часть руководстваочень полезно. Если вы хотите узнать больше ответов, порекомендуйте мой любимыйСообщение в блоге Андре Штальци Майка Бостокалучшее кодирование

Суммировать

Я надеюсь, что это руководство о том, как его использовать, и оно повысит вашу продуктивность с помощью Vue для разработки приложений. Есть статистика, что мы тратим 70% времени на чтение кода и только 30% времени на написание. Лично мне как мейнтейнеру это нравится, я могу смотреть кодовые базы, которых раньше не видел, и иметь возможность пройтиmethods,computedа такжеwatchersразница использования, чтобы понять замысел автора.

оригинал:Methods, Computed, and Watchers in Vue.js

автор:SARAH DRASNER

Переводчик: Диандиан

Категории