Мне очень нравится использовать Vue.js, и каждый раз, когда я использую этот фреймворк, мне нравится вникать в его возможности и функции. В этой статье я познакомлю вас с десятью крутыми советами и приемами, о которых вы, возможно, не знали, которые помогут вам стать лучшим разработчиком Vue.
Более красивый синтаксис слота
С введением Vue 2.6 вы ввели щелкнутый метод, который можно использовать для событий (например,@clickвыражатьv-on:clickсобытие) или двоеточие для привязки (:src). Например, если у вас есть табличный компонент, вы можете использовать эту функцию следующим образом:
<template>
...
<my-table>
<template #row={ item }>
/* 一些内容，你可以在这里自由使用“item” */
</template>
</my-table>
...
</template>
$on('hook:') может помочь вам упростить код
Удаление прослушивателей событий является общепринятой передовой практикой, поскольку это помогает избежать утечек памяти и предотвращает конфликты событий.
если вы хотитеcreatedилиmountedОпределите пользовательские прослушиватели событий или сторонние плагины в хукахbeforeDestroyЭто хорошая возможность удалить его в хуке, чтобы избежать утечек памяти. Вот типичная установка:
mounted () {
window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
window.removeEventListener('resize', this.resizeHandler);
}
использовать$on('hook:')метод, вы можете определять/удалять события, используя только один метод жизненного цикла (вместо двух).
mounted () {
window.addEventListener('resize', this.resizeHandler);
this.$on("hook:beforeDestroy", () => {
window.removeEventListener('resize', this.resizeHandler);
})
}
$on также может прослушивать обработчики жизненного цикла дочерних компонентов.
И последнее замечание: тот факт, что обработчики жизненного цикла генерируют пользовательские события, означает, что родительские компоненты могут прослушивать обработчики жизненного цикла своих дочерних элементов.
Он будет использовать обычный режим для прослушивания событий (@event) и может обрабатываться как другие пользовательские события.
<child-comp @hook:mounted="someFunction" />
Используйте немедленно: true для запуска наблюдателя при инициализации
Vue Watchers— отличный способ добавить дополнительные функции (например, вызовы API), которые можно запускать при изменении наблюдаемого значения.
По умолчанию наблюдатели не запускаются при инициализации. В зависимости от вашей функции это может означать, что некоторые данные не будут полностью инициализированы.
watch: {
title: (newTitle, oldTitle) => {
console.log("Title changed from " + oldTitle + " to " + newTitle)
}
}
Если вам нужно, чтобы вода запускалась сразу после инициализации экземпляра, все, что вам нужно сделать, это преобразовать воду вhandler(newVal, oldVal)функция и мгновенноеimmediate: trueОбъект.
watch: {
title: {
immediate: true,
handler(newTitle, oldTitle) {
console.log("Title changed from " + oldTitle + " to " + newTitle)
}
}
}
Вы всегда должны проверять свою опору
Проверка реквизитов — одна из фундаментальных практик в Vue.
Вы, наверное, уже знаете, что свойства могут быть проверены как примитивные типы, такие как строки, числа или даже объекты. Вы также можете использовать собственные валидаторы — например, если вы хотите проверить список строк:
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
Параметры динамической команды
Одна из самых крутых особенностей Vue 2.6 — возможность динамически передавать директивные параметры компонентам. Предположим, у вас есть компонент кнопки, и в некоторых случаях вы хотите прослушивать события щелчка, а в других случаях вы хотите прослушивать события двойного щелчка. Вот где эти директивы пригодятся:
<template>
...
<aButton @[someEvent]="handleSomeEvent()" />...
</template>
<script>
...
data(){
return{
...
someEvent: someCondition ? "click" : "dbclick"
}
},
methods: {
handleSomeEvent(){
// handle some event
}
}
</script>
Кроме того, на самом деле это довольно удобно — вы можете применить тот же шаблон к динамическим HTML-атрибутам, свойствам и т. д.
Компоненты, повторно использующие один и тот же маршрут
Разработчики часто сталкиваются с ситуациями, когда несколько маршрутов разрешаются в один и тот же компонент Vue. Проблема в том, что Vue не будет повторно отображать общие компоненты по умолчанию из соображений производительности, и если вы попытаетесь переключиться между маршрутами, использующими один и тот же компонент, ничего не изменится.
const routes = [
{
path: "/a",
component: MyComponent
},
{
path: "/b",
component: MyComponent
},
];
Если вы все еще хотите перерендерить эти компоненты, вы можетеrouter-viewпредоставляется в компоненте:keyсвойства для достижения.
<template>
<router-view :key="$route.path"></router-view>
</template>
Легко передать все реквизиты дочерним компонентам
Это действительно крутая функция, которая позволяет вам передавать все реквизиты от родительских к дочерним компонентам. Это особенно удобно, если у вас есть компонент-оболочка другого компонента. Таким образом, вместо того, чтобы передавать все реквизиты один за другим, вы можете использовать это, чтобы передать все реквизиты одновременно:
<template>
<childComponent v-bind="$props" />
</template>
заменять:
<template>
<childComponent :prop1="prop1" :prop2="prop2" :prop="prop3" :prop4="prop4" ... />
</template>
Легко передать все прослушиватели событий дочерним компонентам
Если дочерний компонент не находится в корне родительского компонента, вы можете передать все прослушиватели событий из родительского компонента в дочерний компонент следующим образом:
<template>
<div>
...
<childComponentv-on="$listeners" />...
<div>
</template>
Если дочерний компонент находится в корне своего родителя, он получит эти компоненты по умолчанию, поэтому этот маленький трюк не нужен.
$createElement
По умолчанию каждый экземпляр Vue имеет доступ к$createElementметоды для создания и возврата виртуальных узлов. Например, можно использовать разметку в методах, которые можно передать через директивы v-html. В функциональном компоненте к этому методу можно обращаться как к первому параметру функции рендеринга.
Использование JSX
Поскольку Vue CLI 3 по умолчанию поддерживает использование JSX, теперь вы можете (при желании) писать код в JSX (например, функциональные компоненты могут быть написаны удобно). Если вы еще не используете Vue CLI 3, вы можете использоватьbabel-plugin-transform-vue-jsxПолучите поддержку JSX.
пользовательская v-модель
по умолчанию,v-modelда@inputпрослушиватели событий и:valueСинтаксический сахар в свойствах. Однако вы можете указать свойство модели в своем компоненте Vue, чтобы определить, какие события и свойства значений используются — отлично!
export default: {
model: {
event: 'change',
prop: 'checked'
}
}
Суммировать
Это ни в коем случае не полный список советов по VueJS, это лишь некоторые из тех, которые я лично считаю наиболее полезными, некоторые из которых заняли у меня много времени, чтобы практиковаться в Vue, поэтому я подумал, что могу поделиться этими знаниями со всеми вами.
Надеюсь, они так же полезны для вас, как и я!
Какие ваши любимые советы и приемы VueJS? Я бы тоже хотела у вас поучиться!
Ссылка на ссылку:
Эта статья была впервые опубликована в публичном аккаунте"Fullstack-разработчик фронтенда"ID: by-zhangbing-dev, прочитайте последние статьи в первый раз и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!