7 полезных советов по разработке Vue

1 Совместное использование состояния

При доработке компонентов будет встречаться ситуация многокомпонентного совместного использования состояния.VuexКонечно, решить такую проблему можно, но что-то вродеVuexСогласно официальной документации, если приложение недостаточно большое, лучше его не использовать во избежание громоздкого и избыточного кода.Сегодня мы представляем недавно добавленный vue.js 2.6.Observable API, используя этот API, мы можем справиться с простым обменом данными между компонентами.

В следующем примере мы создадимstore, затем вApp.vueКомпоненты, предоставляемые store.js, используются вstoreиmutationметод, и другие компоненты также могут использоваться таким же образом, чтобы несколько компонентов могли совместно использовать состояние данных.

Сначала создайте store.js, содержащийstoreиmutations, которые используются для указания на данные и методы обработки соответственно.

import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

затем вApp.vueВставьте этот store.js внутрь и используйте импортированные данные и методы в компоненте.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <p>count:{{count}}</p>
    <button @click="setCount(count+1)">+1</button>
    <button @click="setCount(count-1)">-1</button>
  </div>
</template>

<script>
import { store, mutations } from "./store";
export default {
  name: "App",
  computed: {
    count() {
      return store.count;
    }
  },
  methods: {
    setCount: mutations.setCount
  }
};
</script>

<style>

вы можете нажатьОнлайн ДЕМОПроверьте окончательный результат

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);
  }
};

Кроме того, следует отметить, что это только замороженныеusersзначение, ссылка не будет заморожена, когда нам нужноreactiveданные, мы можем датьusersНазначение.

export default {
  data: () => ({
    users: []
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  },
  methods:{
    // 改变值不会触发视图响应
    this.users[0] = newValue
    // 改变引用依然会触发视图响应
    this.users = newArray
  }
};

3 Удалите лишние стили

По мере того, как проект становится все больше и больше, если вы не обращаете внимания на написание, некоторые дополнительные CSS будут создаваться неестественным образом. Небольшие проекты — это хорошо. Когда проект становится больше, избыточный CSS будет становиться все больше и больше, что приведет к package становится все больше и больше, что влияет на производительность проекта, поэтому необходимо удалить эти избыточные css в формальной среде, вот рекомендуемая библиотекаpurgecss, поддержка CLI, JavascriptApi, Webpack и другие способы использования, с помощью этой библиотеки мы можем легко удалить избыточные css.

Я сделал тест,Онлайн ДЕМО

<h1>Hello Vanilla!</h1>
<div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>

body {
  font-family: sans-serif;
}
a {
  color: red;
}
ul {
  li {
    list-style: none;
  }
}

import Purgecss from "purgecss";
const purgecss = new Purgecss({
  content: ["**/*.html"],
  css: ["**/*.css"]
});
const purgecssResult = purgecss.purge();

в конечном итоге произвелpurgecssResultРезультат выглядит следующим образом, вы можете видеть избыточноеaиulСтиль этикетки ушел

4 слота с прицелом

Вы можете делать некоторые интересные вещи, эффективно используя слоты области, например, определяя базовый компонент макета A, который отвечает только за макет, независимо от логики данных, а затем определяя другой компонент B, отвечающий за обработку данных, и когда компонент макета А нужны данные, иди к Б. Возьми их внутрь. Предположим, однажды наш макет изменится, нам нужно изменить только компонент A, а не компонент B, чтобы мы могли полностью повторно использовать логику обработки данных компонента B. Я уже писал реальный случай об этом ранее. , вы можете нажатьздесьПроверять.

Одним из наиболее важных моментов здесь является то, что родительский компонент должен получить данные в дочернем компоненте.slot-scope, который обеспечивает лучшую поддержку, начиная с vue 2.6.0.slotиslot-scopeАльтернативы API атрибутам.

Например, мы называемcurrent-users компонент:

<span>
  <slot>{{ user.lastName }}</slot>
</span>

ссылка на родительский компонентcurrent-user, но хотите заменить фамилию на имя (первое слово имени иностранца - имя, а последнее слово - фамилия):

<current-user>
  {{ user.firstName }}
</current-user>

Этот способ не сработает, потому чтоuserОбъект — это данные дочернего компонента, мы не можем получить его в родительском компоненте, в это время мы можем передатьv-slotреализовать.

Сначала в дочернем компоненте поместитеuserкак<slot>Атрибуты элементов привязаны к:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

После этого, когда на родительский компонент ссылаются, мы можем датьv-slotВозьмите значение, чтобы определить имя реквизита слота, который мы предоставляем:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

Этот метод также имеет сокращенный синтаксис, который можно просмотретьСокращенный синтаксис для эксклюзивного слота по умолчанию, и, наконец, мы ссылаемся на следующий способ:

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

по сравнению с тем, что было раньшеslot-scopeКод чище и проще для понимания.

5 Атрибут доставки событий

Детская обувь, написавшая высокоуровневые компоненты, могла столкнуться с ситуацией передачи обработанных атрибутов вниз, если атрибутов много, то их нужно передавать по одному, что очень недружелюбно и долго. пройти? (например, в реакции{...this.props})? ответv-bindиv-on.

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

<!-- SortList  -->
<template>
  <BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>
</template>

<script>
  import BaseList from "./BaseList";
  // 包含了基础的属性定义
  import BaseListMixin from "./BaseListMixin";
  // 封装了排序的逻辑
  import sort from "./sort.js";

  export default {
    props: BaseListMixin.props,
    components: {
      BaseList
    }
  };
</script>

Вы можете увидеть удобство передачи свойств и событий вместо передачи их по одному.

6 функциональных компонентов

Функциональные компоненты не имеют состояния, не могут быть созданы и не имеют внутренних методов обработки жизненного цикла.Они очень легкие и имеют высокую производительность рендеринга.Они особенно подходят для компонентов, которые зависят только от внешней передачи и изменения данных.

Это написано следующим образом:

существуетtemplateвнутри этикеткиfunctional
принимать толькоpropsценность
ненужныйscriptЭтикетка

<!-- 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";

export default {
  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>

7 Мониторинг жизненного цикла компонентов

Например, есть родительский компонентParentи подкомпонентыChild, если родительский компонент слушает монтирование дочернего компонентаmountedПросто выполните некоторую логическую обработку, обычный метод записи может быть следующим:

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

Вот особенно простой способ, дочерний компонент не нуждается в какой-либо обработке, просто нужно передать, когда ссылается на родительский компонент@hookДля мониторинга код переписывается следующим образом:

<Child @hook:mounted="doSomething"/>

Конечно, можно не только контролироватьmounted, другие события жизненного цикла, такие как:created,updatedТы можешь подождать, разве это не очень удобно~

Ссылка на ссылку:

vueTips
vuePost