Статьи

4 основных функции ES2015 для разработки Vue.js

Сентябрь 4, 2017

ES2015 (он же ES6) — это текущая спецификация языка JavaScript. Если вы новичок в JavaScript или еще недавно не обновляли свои знания JavaScript, в ES2015 есть ряд новых функций, которые делают разработку намного лучше и приятнее.

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

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

  1. Функции стрелок
  2. Шаблонные литералы
  3. Модули
  4. Разрушение и распространение синтаксиса

1. Стрелка Функции

Функции со стрелками — это новый способ объявления функций JavaScript. Они обеспечивают более короткий синтаксис, но отличаются от обычных функций JavaScript и другими способами.

// Regular JavaScript function
function(parameters) {
  statements
}

// Arrow function
(parameters) => {
  statements
}

Без границ this

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

Рассмотрим методы массива JavaScript, требующие функции обратного вызова. Array.filterНапример, позволяет возвращать новый массив, включающий только те элементы, которые соответствуют фильтру, определенному обратным вызовом.

Одной из замечательных особенностей Vue.js является то, что вы можете легко получать доступ к свойствам данных, вычисляемым свойствам и методам this.vuePropertyиз контекста объекта конфигурации Vue.

Однако, если вы используете обычную функцию для обратного вызова, она свяжет свое собственное значение для this. Затем вы не можете ссылаться на свойства объекта Vue, так как this.vuePropertyиз обратного вызова вы должны вручную создать их где-нибудь в области обратного вызова.

В приведенном ниже примере sizeэто свойство данных. В fitlerBySizeвычисляемом свойстве нам нужно объявить переменную, sizeчтобы это значение можно было использовать в filterобратном вызове:

new Vue({
  data: {
    size: 'large',
    items: [ { size: 'small' }, { size: 'large' } ]  
  },
  computed: {
    filterBySize() {
      let size = this.size;
      return this.items.filter(function(item) {
        return item.size === size;
        // Note: this.size is undefined
      });
    }
  }  
});

Функция стрелки использует thisобъект из окружающего контекста. В данном случае это filterBySizeсвойство computed, к которому привязан объект Vue this, что упрощает filterобратный вызов:

filterBySize() {
  return this.items.filter((item) => {
    return item.size === this.size;
  });
}

Попался

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

// Regular function

var regular = new Vue({
  data: {
    val: 'Hello world'
  },
  computed: {
    upperCase() {
      return this.val.toUpperCase();
    }  
  }
});

console.log(regular.upperCase); // HELLO WORLD

// Arrow function

var arrow = new Vue({
  data: {
    val: 'Hello world'
  },
  computed: {
    upperCase: () => {
      return this.val.toUpperCase();
    }  
  }
});

console.log(arrow.upperCase);
// Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Одиночный параметр и неявный возврат

Вы можете сделать синтаксис функции стрелки еще более кратким в определенных сценариях. Если у вас есть только один параметр для вашей функции, вы можете снять скобки (). Если у вас есть только одно выражение в вашей функции, вы можете даже удалить фигурные скобки {}!

Вот обратный вызов фильтра массива сверху с этими сокращенными вариантами:

filterBySize() {
  return this.items.filter(item => item.size === this.size);
}

Узнайте больше о функциях стрелок на MDN .

2. Шаблонные литералы

Шаблонные литералы используют обратные символы («) вместо двойных или одинарных кавычек для определения строки.

Шаблонные литералы позволяют нам делать две супер-полезные вещи в Vue.js:

  • Многострочные строки (отлично подходит для шаблонов компонентов).
  • Встроенные выражения (отлично подходит для вычисляемых свойств).

Многострочные строки

Написание шаблона в коде JavaScript не является идеальным, но иногда мы хотим / должны. Но что, если в шаблоне много контента? До ES2015 у нас есть два варианта:

Сначала поместите все в одну строку:

Vue.component({
  template: '<div><h1>{{ title }}</h1><p>{{ message }}</p></div>'
});

Это действительно трудно читать, когда строка становится длинной.

Второй вариант: сделать его многострочным. Из-за того, как анализируются строки JavaScript, вам нужно разбить строку в конце каждой строки и снова соединить ее с помощью a +. Это значительно затрудняет редактирование шаблона:

Vue.component({
  template: '<div>' +
            '<h1>{{ title }}</h1>' +
            '<p>{{ message }}</p>' +
            '</div>'
});

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

Vue.component({
  template: `<div>
              <h1>{{ title }}</h1>
              <p>{{ message }}</p>
            </div>`
});

Встроенные выражения

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

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

new Vue({
  data: {
    name: 'George'
  },
  computed: {
    greeting() {
      return 'Hello, ' + this.name + ', how are you?'
    }
  }
});

Используя заполнитель ${}в литерале шаблона, мы можем вставлять переменные и другие выражения, не разбивая строку:

new Vue({
  data: {
    name: 'George'
  },
  computed: {
    greeting() {
      return `Hello, ${this.name}, how are you?`
    }
  }
});

Узнайте больше о шаблонных литералах на MDN .

3. Модули

Как вы загружаете объект JavaScript из одного файла в другой? Не было родного способа сделать это до ES2015. Используя модули JavaScript , мы можем сделать это с помощью синтаксиса экспорта и импорта :

file1.js

export default {
  myVal: 'Hello'
}

file2.js

import obj from './file1.js';
console.log(obj.myVal); // Hello

Модули предлагают два ключевых преимущества:

  1. Мы можем разделить наше приложение JavaScript на несколько файлов.
  2. Мы можем сделать определенный код повторно используемым в разных проектах.

Компонентные модули

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

app.js

Vue.component('component1', { ... });
Vue.component('component2', { ... });
Vue.component('component3', { ... });

new Vue({ ... });

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

component1.js

export default {
  // component definition
};

Теперь мы можем импортировать объект определения компонента в наш основной файл:

app.js

import component1 from './component1.js';
Vue.component('component1', component1);

...

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

А чтобы узнать больше о модулях JavaScript, начните здесь с функции импорта .

4. Разрушение и распространение синтаксиса

Объекты являются неотъемлемой частью разработки Vue.js. ES2015 упрощает работу со свойствами объекта благодаря некоторым новым функциям синтаксиса.

Деструктурирующее задание

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

let myObj = {
  prop1: 'Hello',
  prop2: 'World'
};

const prop1 = myObj.prop1;
const prop2 = myObj.prop2;

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

let myObj = {
  prop1: 'Hello',
  prop2: 'World'
};

const { prop1, prop2 } = myObj;

console.log(prop1);
// Output: Hello

Разрушение полезно в действиях Vuex. Действия получают contextобъект, который включает в себя свойства stateобъекта и commitметод API:

actions: {
  increment (context) {
   // context.state
   // context.commit(...)
  }
}

Однако обычно это stateсвойство не требуется в действии, а только хочет использовать commitAPI. Используя назначение деструктурирования в профиле функции, вы можете создать commitпараметр для использования в теле, уменьшая детализацию этой функции:

actions: {
  increment ({ commit }) {
    commit(...);
  }
}

Синтаксис распространения

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

let myObj = {
  prop1: 'Hello',
  prop2: 'World'
};

let newObj = {
  name: 'George',
  prop1: myObj.prop1,
  prop2: myObj.prop2
};

console.log(newObj.prop1); // Hello

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

let newObj = {
  name: 'George',
  ...myObj
};

console.log(newObj.prop1); // Hello

Снова взяв пример из Vuex, мы часто хотим использовать наши свойства состояния Vuex в качестве вычисляемых свойств. До ES2015 нам пришлось бы копировать каждый вручную. Например:

store.js

new Vuex.Store({
  state: {
    prop1: ...,
    prop2: ...,
    prop3: ...
  }
});

app.js

new Vue({
  computed: {
    prop1() {
      return store.state.prop1;
    },
    prop2() {
      return store.state.prop2;
    }
    ...
  }
});

Vuex предоставляет mapStateфункцию, которая возвращает объект со всеми свойствами состояния Vuex, которые вы указываете, предоставляя их ключи:

import { mapState } from 'vuex';

var state = mapState(['prop1', 'prop2', 'prop3']);
console.log(state.prop1) // { ... }

Используя mapStateсовместно с оператором распространения, мы можем очень кратко комбинировать локальные вычисляемые свойства со свойствами Vuex:

app.js

import { mapState } from 'vuex';

new Vue({
  computed: {
    someLocalComputedProp() { ... },
    ...mapState(['prop1', 'prop2', 'prop3'])
  }
});

Это классно! Что-то еще?

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

  1. Обещания. Они помогают в асинхронном программировании и могут использоваться вместе с Async Components, а также с действиями Vuex.
  2. Object.assign, Это не то, что вам напрямую нужно очень часто, но это поможет вам понять, как работает система реактивности Vue. Vue.js 3.x, вероятно, будет использовать новую функцию Proxies, так что проверьте это тоже!

35
Share: