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

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

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

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

1. Стрелочные функции

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

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

Без ограничений this

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

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

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

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

В приведенном ниже примере size является свойством data. В вычисляемом свойстве fitlerBySize нам нужно объявить size переменной, чтобы это значение можно было использовать в fitlerBySize 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 , связанного с объектом Vue, что упрощает обратный вызов 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></h1><p></p></div>'
});

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

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

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

Vue.component({
  template: `<div>
 <h1></h1>
 <p></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

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

-Можно разбить приложение JavaScript на несколько файлов

-Можно сделать определенный код повторно используемым в разных проектах

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

Одним из замечательных вариантов использования файлов модулей является компонент. До появления 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. Обратитесь к этой статье за дополнительной информацией.

Деструктуризация и синтаксис spread

Объекты являются неотъемлемой частью разработки 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 и API метода commit:

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

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

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

Синтаксис Spread

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

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

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

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

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

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 в сочетании с оператором spread, мы можем комбинировать локальные вычислительные свойства с данными из Vuex очень коротко:

app.js

import { mapState } from 'vuex';

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

Это круто! Что ещё?

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

Promises

Они помогают с асинхронным программированием и могут использоваться вместе с компонентами Async, а также с действиями Vuex.

Object.assign

Это не то, что часто будет нужно, но это поможет понять, как работает реакционная система Vue. Vue.js 3.x, которая скорее всего, будет использовать новую функцию Proxies, поэтому проверьте на всякий случай!