предисловие
Стоимость обучения и сложность Vue не высоки, что связано не только с концепцией дизайна самого фреймворка, но и тесно связано с полной официальной документацией Vue.Я полагаю, что есть много таких разработчиков, как я, которые не внимательно Я читал официальные документы, и недавно нашел время, чтобы внимательно прочитать официальные документы и разобраться в некоторых моментах, которые легко упустить из виду, чтобы поделиться с вами.
легко упускаемый момент
Использование стрелочных функций
Популярность ES6 делает использование стрелочных функций более частым, но не используйте стрелочные функции для свойств параметров или обратных вызовов в Vue, например:
new Vue({
el: '#app',
data: {
show: true
},
created: () => {
console.log(this.show)
},
})
Запишите созданный хук как стрелочную функцию, где this больше не будет указывать на объект Vue, а будет указывать на объект окна в браузере, потому что стрелочная функция не имеет this, и this будет использоваться как переменная искать лексическую область верхнего уровня до тех пор, пока она не будет найдена.
Динамические параметры инструкции
Начиная с Vue 2.6.0, вы можете использовать выражение JavaScript, заключенное в квадратные скобки, в качестве параметра директивы, например:
<div id="app">
<input v-on:[event] = "doSomething">
<button v-on:click="event = 'focus'">change</button>
</div>
new Vue({
el: '#app',
data() {
return {
event: 'input'
}
},
methods: {
doSomething () {
console.log('sss')
}
},
})
Здесь отслеживание событий ввода настроено на событие динамического параметра. По умолчанию используется прослушивание события щелчка. При нажатии на изменение оно изменяется для прослушивания события фокуса. Ожидается, что динамический параметр получит строку. В ненормальных случаях значение равно null, а нулевые значения могут использоваться для удаления привязок, любое другое нестроковое значение вызовет предупреждение.
Метод, используемый в шаблоне
Методы, представленные в методах, в основном используются для вызова других методов, но их также можно написать непосредственно в шаблоне, например, в вычисляемых свойствах, например:
<div id="app">{{reversedMessage('hello')}}</div>
var app = new Vue({
el: '#app',
methods: {
reversedMessage: function (message) {
return message.split('').reverse().join('')
}
},
})
Зачем использовать методы с вычисляемыми свойствами? Вычисляемые свойства кэшируются на основе отзывчивых зависимостей и будут переоцениваться только при изменении соответствующих зависимостей, а методы будут пересчитываться каждый раз, когда они вызываются.При вызове методов вы можете передавать параметры для выполнения указанных вычислений, но вычисляемые не работает Это полезно при переборе массивов
Управление повторно используемыми элементами с помощью ключей
Vue отображает элементы максимально эффективно, часто повторно используя существующие элементы, а не создавая их с нуля. Это сделает Vue очень быстрым, например:
<div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
<button @click="change">change</button>
</div>
var app = new Vue({
el: '#app',
data() {
return {
loginType: 'username'
}
},
methods: {
change () {
this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})
Переключение loginType в приведенном выше коде не очистит то, что ввел пользователь, потому что два шаблона используют одни и те же элементы.Если вы не хотите повторно использовать его, это очень просто, просто добавьте ключевой атрибут с уникальным значением:
<template v-if="loginType === 'username'">
<label>Username</label>
<input key="username" placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input key="email" placeholder="Enter your email address">
</template>
<button @click="change">change</button>
Теперь переключитесь, он будет перерисовываться каждый раз, но элемент метки все равно будет повторно использоваться, потому что он не имеет уникального значения ключа.
v-если используется с v-для
Руководство по стилю Vue не рекомендует использовать v-if и v-for одновременно.Когда eslint в проекте наследует @vue/standard, он скомпилируется и сообщит об ошибке, но вы можете добавить Игнорировать, и когда они находятся на одном узле, v-for имеет более высокий приоритет, чем v-if, что означает, что v-if будет повторяться в каждом цикле v-for.
Обнаружение изменения объекта
В Vue не разрешено динамически добавлять адаптивные свойства корневого уровня к уже созданному экземпляру, но мы знаем, что можем добавлять адаптивные свойства к вложенным объектам с помощью метода Vue.set(object, propertyName, value). Как насчет присвоения объекту нескольких новых свойств? Например:
<div id="app">{{user.name}}-{{user.age}}-{{user.sex}}</div>
var app = new Vue({
el: '#app',
data() {
return {
user: {
name: 'xxx'
}
}
},
created() {
this.user = Object.assign({}, this.user, {
age: 18,
sex: 'name'
})
},
})
Вы можете использовать Object.assign, чтобы переназначить этот объект, чтобы добавить несколько новых реактивных свойств.
Встроенный метод для доступа к необработанным событиям DOM
Иногда при вызове метода в шаблоне нам нужно передать параметры методу, но при этом передать оригинальное DOM-событие, как с этим быть? Например:
<div id="app">
<button @click="share('share info', $event)">share</button>
</div>
var app = new Vue({
el: '#app',
data() {
return {
user: {
name: 'xxx'
}
}
},
methods: {
share (info, event) {
console.log(info, event)
}
},
})
Как показано в примере, его можно передать в метод с помощью специальной переменной $event
один раз, пассивные модификаторы событий
Vue предоставляет несколько модификаторов событий. Один раз и пассивный — это два новых, добавленных позже. Один раз используется для ограничения события, которое будет инициировано только один раз, а пассивный используется для запуска измененного события сразу после его возникновения для повышения производительности мобильных устройств.
модификатор ввода формы
.lazy
По умолчанию v-model синхронизирует значение поля ввода с данными после срабатывания каждого события ввода.Вы можете добавить модификатор lazy, чтобы переключиться на использование события изменения для синхронизации.Например:
<input placeholder="lazy" v-model.lazy="msg" @input="input" @change="change">
.number
Если вы хотите автоматически преобразовывать введенное пользователем значение в числовой тип, вы можете добавить модификатор числа к v-model, что часто полезно, поскольку значение элементов ввода HTML всегда будет возвращать строку, даже если type="number". Если значение не может быть проанализировано функцией parseFloat(), она вернет исходное значение, например:
<input placeholder="number" v-model.number="age" @input="input">
.trim
Если вы хотите автоматически фильтровать начальные и конечные пробельные символы, введенные пользователем, вы можете добавить модификатор обрезки в v-model, например:
<input placeholder="trim" v-model.trim="trim" @input="input">
Подкомпоненты заменяют/объединяют существующие функции
Для большинства функций Vue значение, предоставляемое компоненту извне, заменяет значение, установленное внутри компонента. Таким образом, передача type="text" заменит type="date" и сломает его! К счастью, атрибуты класса и стиля немного умнее, т.е. значения с обеих сторон объединяются для получения конечного значения, например:
<div id="app">
<base-input type="text" class="out"></base-input>
</div>
Vue.component('base-input', {
template: `<input type="date" placeholder="replace" class="default">`
})
new Vue({
el: '#app',
})
В приведенном выше примере значение типа ввода — дата, а класс — значение по умолчанию.При использовании подкомпонента передайте type="text" class="out" в подкомпонент, а значение типа ввод будет заменен текстом.Значение класса будет объединено с «выходом по умолчанию», так что, если вы хотите отключить наследование свойств? Вы можете установить inheritAttrs:false в настройках компонента, например:
Vue.component('base-input', {
inheritAttrs: false,
template: `<input type="date" placeholder="replace" class="default">`
})
Но параметр inheritAttrs:false не повлияет на привязку стиля и класса, поэтому стиль и класс все равно будут объединены.
модификатор .sync
В некоторых случаях может потребоваться «двусторонняя привязка» реквизита. К сожалению, настоящая двусторонняя привязка создает проблемы с обслуживанием, поскольку дочерние компоненты могут изменять родительские компоненты, а очевидного источника изменений в родительских и дочерних компонентах нет, поэтому Vue предоставляет модификатор синхронизации, например:
<div id="app">
<span>{{title}}</span>
<text-document v-bind:title.sync="title"></text-document>
</div>
Vue.component('text-document', {
props: ['title'],
template: `<button @click="change">change</button>`,
methods: {
change () {
this.$emit('update:title', 'change')
}
},
})
new Vue({
el: '#app',
data() {
return {
title: 'default'
}
}
})
При вызове this.$emit('update:title', 'change') заголовок в родительском компоненте изменится
Суммировать
В этой статье кратко описаны некоторые аспекты Vue, которые легко упустить из виду, и я надеюсь, что она будет вам полезна после прочтения. Если есть ошибки или неточности, прошу покритиковать и поправить, если хотите, добро пожаловать на лайк