предисловие
В обычной разработке мы, возможно, использовали vue в течение длительного времени, но мы не обнаружили каких-то новых функций или навыков.Эта статья познакомит вас с часто используемыми навыками vue.
1. Обмен состояниями
При доработке компонентов вы столкнетесь с ситуацией многокомпонентного разделения состояния, Vuex конечно может решить такого рода проблемы, но как говорится в официальной документации Vuex, если приложение недостаточно большое, во избежание громоздкости и избыточный код, лучше не использовать его, сегодня мы представляем недавно добавленный Observable API в vue.js 2.6, Используя этот API, мы можем иметь дело с некоторым простым обменом данными между компонентами.
В следующем примере мы создадим хранилище вне компонента, а затем воспользуемся методами хранения и мутации, предоставляемыми store.js, в компоненте App.vue Аналогичным образом можно использовать и другие компоненты, так что несколько компоненты могут совместно использовать состояние данных.
Сначала создайте store.js, который содержит хранилище и мутацию, которые используются для указания на данные и методы обработки соответственно.
import Vue from "vue";
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
};
Затем импортируйте этот store.js в App.vue и используйте импортированные данные и методы в компоненте.
2. Оптимизация производительности лонг-листа
Мы все должны знать, что vue перехватит данные через object.defineProperty, чтобы реализовать реакцию представления на изменения данных.Однако иногда наши компоненты представляют собой чистое отображение данных, и изменений не будет.Нам не нужен vue, чтобы перехватить наши данные, в случае отображения большого объема данных это может значительно сократить время инициализации компонентов, так как же предотвратить перехват наших данных vue? Объект можно заморозить с помощью метода object.freeze, после чего замороженный объект больше нельзя будет модифицировать.
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
Кроме того, следует отметить, что здесь замораживается только значение пользователей, а ссылка не будет заморожена.Когда нам нужны реактивные данные, мы можем переназначить пользователей.
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
methods:{
// 改变值不会触发视图响应this.data.users[0] = newValue
// 改变引用依然会触发视图响应this.data.users = newArray
}
};
3. Удалите лишние стили
По мере того, как проект становится все больше и больше, если вы не обращаете внимания на написание, некоторые дополнительные CSS будут создаваться неестественным образом. Небольшие проекты — это нормально. Когда проект становится больше, избыточный CSS будет становиться все больше и больше, что приведет к пакет становится все больше и больше, что влияет на производительность проекта, поэтому необходимо удалить эти избыточные css в формальной среде. Здесь мы рекомендуем библиотеку purgecss, которая поддерживает CLI, JavascriptApi, Webpack и другие методы. Через эту библиотеку , мы можем легко удалить избыточный css css.
npm i glob-all purify-css purifycss-webpack --save-dev
const PurifyCSS = require('purifycss-webpack')
const glob = require('glob-all')
plugins:[
// 清除无用 css
new PurifyCSS({
paths: glob.sync([
// 要做 CSS Tree Shaking 的路径文件
path.resolve(__dirname, './src/*.html'), // 请注意，我们同样需要对 html 文件进行 tree shaking
path.resolve(__dirname, './src/*.js')
])
})
]
4. Функциональные компоненты
Функциональные компоненты не имеют состояния, не могут быть созданы и не имеют внутренних методов обработки жизненного цикла.Они очень легкие и имеют высокую производительность рендеринга.Они особенно подходят для компонентов, которые зависят только от внешней передачи и изменения данных.
Это написано следующим образом:
Отметить функционал в теге шаблона Принимает только значения реквизита Теги скрипта не нужны
<!-- App.vue -->
<template>
<div id="app">
<List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)"
/>
<p>Clicked hero: {{ clicked }}</p>
</div>
</template>
<script>
import List from "./List";
exportdefault {
name: "App",
data: () => ({ clicked: "" }),
components: { List }
};
</script>
<!-- List.vue 函数式组件 -->
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{ item }}
</p></div>
</template>
5. Следите за жизненным циклом компонентов
Например, есть родительский компонент Parent и дочерний компонент Child. Если родительский компонент прослушивает смонтированный дочерний компонент, он будет выполнять некоторую логическую обработку. Обычный метод записи может быть следующим:
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
Вот особенно простой способ.Дочерний компонент не нуждается в какой-либо обработке, и его нужно только отслеживать через @hook при обращении к родительскому компоненту.Код переписывается следующим образом:
<Child @hook:mounted="doSomething"/>
<Child @hook:updated="doSomething"/>
Конечно, можно следить не только за смонтированным, но и за другими событиями жизненного цикла, такими как создание, обновление и т.д., это очень удобно~
Другой пример — обычное событие выгрузки привязки:
window.addEventListener('resize',this.handleResize)
this.$on('hook:destroyed',() => {
window.removeventListener('resize',this.handleResize)
})
Для получения дополнительной информации об использовании хуков (useMounted, useComputed) см. vue-hookисходный код
6. Первоначальное немедленное исполнение Watch
При просмотре переменной она не будет выполняться при инициализации, как в следующем примере, ее нужно один раз вызвать вручную при ее создании.
created() {
this.fetchUserList();
},
watch: {
searchText: 'fetchUserList',
}
Вышеприведенный метод можно использовать, но он очень хлопотный.Мы можем добавить немедленный атрибут, чтобы он срабатывал автоматически во время инициализации (не нужно писать created для вызова), и тогда приведенный выше код можно упростить до:
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true
}
}
Суммировать
Выше приведены часто используемые навыки разработки Vue, я надеюсь помочь вам