- PVSM.RU - https://www.pvsm.ru -
Вот несколько советов по работе с Vue.js которые я выработал за последний год.
ES6 подарил нам новый способ объявления функций с удобным биндингом текущей области видимости. При использовании старого способа, this может ссылаться не на то что вы ожидаете.
Например:
function Person () {
this.age = 0;
setInterval(function growUp () {
// `this.age` здесь равен undefined
// эта функция создает новую область видимости
// отличную от области видимости функции Person
console.log(this.age);
}, 1000)
}
const Developer = new Person();
Функция growUp определила свою область видимости и this внутри нее не ссылается на объект Person. Добиться желаемого поведения, можно сохранив область видимости в переменной, или используя функцию .bind(context)
// Сохраняем контекст в переменной that
function Person () {
var that = this;
that.age = 0;
setInterval(function growUp () {
console.log(that.age);
}, 1000)
}
// или используем функцию bind
function Person () {
this.age = 0;
setInterval(function growUp () {
console.log(this.age);
}.bind(this), 1000)
}
Но самым удобным вариантом будет простое использование стрелочной функции. Она автоматически привязывает область видимости функции к родительской области видимости
function Person () {
this.age = 0;
setInterval(() => {
console.log(this.age);
}, 1000)
}
Так лучше, не правда ли? :)
Однофайловые компоненты [1] (.vue) — одна из моих любимых фич в Vue.js
Они позволяют нам определять многократно используемые шаблоны и отдельные части нашего приложения и переиспользовать их. Но для их использования понадобятся соответствующие инструменты сборки.
(прим. пер. всё это уже настроено и готово к работе в консольной утилите Vue-cli [2]).
Есть два способа создания Vue компонентов.
Например:
Vue.component('my-counter', {
data () {
return {
count: 0
}
},
methods: {
add () {
this.count += 1;
}
},
template: `<div>
<div>{{ count }}</div>
<button @click="add()">Increment</button>
</div>`
}
});
Теперь тоже самое, но используя .vue файл
<template lang="html">
<div>
<div>{{ count }}</div>
<button @click="add()">Increment</button>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
add () {
this.count += 1;
}
}
}
</script>
На небольшом компоненте преимущества не так очевидны, но при установке соответствующих расширений в ваш редактор — вы получите отличную подсветку синтаксиса, а так же вам станет легче найти нужный кусок компонента (сверху вниз идут шаблон, js, стили).
При разработке больших приложений вам вы повсюду будете использовать функциональность одних компонентов внутри других и что бы каждый раз не импортировать .vue компонент внутрь каждого, где нужен его функционал — лучше один раз написать его и использовать как глобальный плагин.
Мы можем сделать один компонент со всей нужной нам функциональностью:
<template lang="html">
<div>
<user-container v-for="u in users">
<p>{{ sayHello(u.name) }}</p>
</user-container>
</div>
</template>
<script>
import UserContainer from './UserContainer' // Придется импортировать в каждый компонент где он нужен
export default {
components: {
UserContainer,
},
methods: {
sayHello (name) {
return `Hello ${name}!`
}
},
computed: {
users () {
return this.$store.getters['users']()
}
}
}
</script>
Или мы можем создать плагин и использовать его:
import UserContainer from './UserContainer'
const Plugin = {
install (Vue, options) {
// <g-user-container> будет доступен глобально во всем приложении
Vue.component('GUserContainer', UserContainer)
Vue.mixin({
computed: {
// `users` так же будет доступен везде
users () {
return this.$store.getters.users
},
}
})
// $sayHello is available within components
Vue.prototype.$sayHello = function (name) {
return `Hello ${name}!`
}
}
}
// И используем наш плагин
import Vue from 'vue'
Vue.use(Plugin)
new Vue({
//...
})
Используйте этот подход, когда видите, что повторяете одинаковый функционал внутри своих компонентов. Don't repeat yourself
Современные веб-приложения используют большое количество данных на клиенте и управляют ими. Я видел как люди просто хранят все данные внутри компонентов. Это нормальный подход в случае, когда вам не нужен доступ к данным одного компонента из другого.
Очень заманчиво использовать props для передачи данных в компоненты, или использовать библиотеки для подписки на события (Pub—Sub), что бы управлять данными в приложении, но со временем это приводит к раздуванию кода, и становится сложно поддерживать ваше приложение.
Vuex [3] пригодится, когда вашим компонентам понадобиться доступ к одному и тому же состоянию. Вместо того что бы превращать ваш код в ад, прикидывая все данные через props, Vuex позволит хранить в себе всё состояние приложения, и предоставлять к нему доступ нужным компонентам.
С помощью Vuex мы можем определить state (данные), геттеры, экшены и мутации, которые позволят нам манипулировать данными как нам необходимо.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
movies: [],
actors: []
},
getters: {
movies: state => {
return state.movies
},
actors: state => {
return state.actors
}
},
actions: {
getMovies (context) {
axios.get('/api/movies')
.then((movies) => {
context.commit('setMovies', movies)
})
},
getActors (context) {
axios.get('/api/actors')
.then((actors) => {
context.commit('setActors', actors)
})
}
},
mutations: {
setMovies (state, movies) {
state.movies = movies
},
setActors (state, actors) {
state.actors = actors
}
}
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
Используем Vuex внутри компонента:
<template lang="html">
<div>
<div v-for="m in movies">
<p>{{ m.name }}</p>
<p>{{ m.description }}</p>
</div>
<div v-for="a in actors">
<p>{{ a.firstName }} {{ a.lastName }}</p>
</div>
</div>
</template>
<script>
export default {
mounted () {
this.$store.dispatch('getMovies')
this.$store.dispatch('getActors')
},
computed: {
movies () {
this.$store.getters.movies
},
actors () {
this.$store.getters.actors
}
}
}
</script>
Vue.js сильно облегчает нам работу, и делает процесс написания новых фич более приятным, но надо потратить немного времени на изучение стека сопутствующих технологий и инструментов.
Надеюсь вы попробуете Vue.js в своём новом проекте
Автор: Александр Сергеевич Инсайт
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/276638
Ссылки в тексте:
[1] Однофайловые компоненты: https://ru.vuejs.org/v2/guide/single-file-components.html
[2] Vue-cli: https://github.com/vuejs/vue-cli
[3] Vuex: https://vuex.vuejs.org/ru/
[4] Источник: https://habrahabr.ru/post/352540/?utm_source=habrahabr&utm_medium=rss&utm_campaign=352540
Нажмите здесь для печати.