Почему мы хотим использовать Vue3?

внешний интерфейс Vue.js
Почему мы хотим использовать Vue3?

Адрес столбца:Анализ исходного кода Vue и практика

Эта статья:я 970
Оригинальная ссылка:nuggets.capable/post/704076…

✨ Открытие

RT, почему мы на Vue3? Влияет ли использование Vue3 на мой Ferrari?

Недавно выпущенный в Vue33.2После большой версии статей о Vue3 на Nuggets становится все больше и больше.Я изначально хотел дать пулям летать какое-то время, но недавно компания запустила проект Vue3, и я сам его изучил.

Вчера я был верным сторонником API параметров Vue2.В результате, после того, как я сегодня поработал над API композиции Vue3, я назвал Vue3 действительно ароматным!

Далее мы начнем с анализа преимуществ и недостатков Vue2 и объединим изображения и варианты использования, чтобы понять преимущества Vue3.

Vue2 ⚔ Vue3

Vue2

преимущество

Нельзя отрицать, что Vue 2 добился успеха.В рейтинге Github Front-End также можно увидеть, что склад Vue занимает первое место с достаточным количеством поклонников и достаточным количеством активных пользователей.

image.png

image.png

На 12 000+ звезд больше, чем у React

С моей точки зрения, наибольший вклад вносят эти трое:

  • отзывчивые данные
  • Options API
  • SFC

Кроме этих трех генералов, непременноVuex/Vue-RouterЭти два героя, а также множество периферийных плагинов и активное сообщество.

недостаток

Когда нести только один компонент логики, использование Options API для написания сборки очень ясно.

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

С точки зрения специалистов по сопровождению кода, предполагая, что в настоящее время существует 10 методов функций, естественно, мы должны поместить их вmethods, и эти 10 методов функций работают с 10 данными соответственно, и эти 10 данных необходимо обрабатывать отдельно.Watchработать.

В это время мыVue2изOptions APIписать, только что закончил 10method,10data,10watch, мы разделим исходные 10 методов функций на 30 разных мест.

В настоящее время код родительского компонента очень недружелюбен к сопровождающим кода.

Кто-то может сказать, что такой способ написания кода может увеличить объем кода, а начальник хвалит меня за то, что я классный! хахаха 😂

Vue3

преимущество

Свобода, свобода или свобода ТМ!

  • Лучшая производительность, лучшее встряхивание дерева
  • Composition API + setup
  • Улучшенная поддержка TypeScript

возможные недостатки

Vue3: дает свободу перебарщивать

использоватьComposition APIсуществуетsetupПосле всего веселья на сцене может возникнуть вопрос: как красиво организовать код?

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

Изменение правописания SFC

Options API对比Composition API.png

Vue2 обычный файл Vue

<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ car.name }}</p>
  </div>
</template>

<script>
export default {
  name: "Person",

  data() {
    return {
      person: {
        name: "小明",
        sex: "male",
      },
      car: {
        name: "宝马",
        price: "40w",
      }
    };
  },

  watch:{
      'person.name': (value) => {
          console.log(`名字被修改了, 修改为 ${value}`)
      },
      'person.sex': (value) => {
          console.log(`性别被修改了, 修改为 ${value}`)
      }
  },

  methods: {
    changePersonName() {
      this.person.name = "小浪";
    },

    changeCarPrice() {
      this.car.price = "80w";
    }
  },
};
</script>

Переписать с помощью Vue3 Composition API

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";

// person的逻辑
const person = reactive<{ name: string; sex: string }>({
  name: "小明",
  sex: "male",
});
watch(
  () => [person.name, person.sex],
  ([nameVal, sexVal]) => {
    console.log(`名字被修改了, 修改为 ${nameVal}`);
    console.log(`名字被修改了, 修改为 ${sexVal}`);
  }
);
function changePersonName() {
  person.name = "小浪";
}

// car的逻辑
const car = reactive<{ name: string; price: string }>({
  name: "宝马",
  price: "40w",
});
function changeCarPrice() {
  car.price = "80w";
}
</script>

Используйте Vue3, чтобы настроить Hook для дальнейшего разделения

<template>
  <p>{{ person.name }}</p>
  <p>{{ car.name }}</p>
  <p>{{ animal.name }}</p>
</template>

<script lang="ts" setup>
import { usePerson, useCar, useAnimal } from "./hooks";

const { person, changePersonName } = usePerson();

const { car } = useCar();
</script>

// usePerson.ts
import { reactive, watch } from "vue";

export default function usePerson() {
  const person = reactive<{ name: string; sex: string }>({
    name: "小明",
    sex: "male",
  });
  watch(
    () => [person.name, person.sex],
    ([nameVal, sexVal]) => {
      console.log(`名字被修改了, 修改为 ${nameVal}`);
      console.log(`名字被修改了, 修改为 ${sexVal}`);
    }
  );
  function changePersonName() {
    person.name = "小浪";
  }
  return {
    person,
    changePersonName,
  };
}

// useCar.ts
import { reactive } from "vue";

export default function useCar() {
  const car = reactive<{ name: string; price: string }>({
    name: "宝马",
    price: "40w",
  });
  function changeCarPrice() {
    car.price = "80w";
  }
  return {
    car,
    changeCarPrice,
  };
}

После сравнения мы обнаружим, что Vue3 позволяет нам лучше организовать наш код.personа такжеcarВся логика вынесена в отдельный блок

Это просто преимущество организации кода? Нет нет нет, давайте посмотрим на некоторые изменения в шаблоне

  • <template>Начальная нота в этикетке может быть опущена<div>ярлык, потому чтоVue3при условии片段возможность использоватьVue-detools, вы можете видеть, что естьfragmentотметка
    image.png
  • WatchВам не нужно перечислять более одного.Vue3Поддержка прослушивания нескольких источников в
  • очень естественно использоватьTypeScript, ограничения типа проще

представление

Vue3 в основном улучшен в этих аспектах

  1. этап компиляции. Оптимизируйте алгоритм сравнения, статическое ускорение и т. д.
  2. Отзывчивая система.Proxy()заменятьObject.defineProperty()слушающий объект. Слушайте объект без дальнейшего обхода,Proxy()можно захватить весь объект
  3. Объем упаковки уменьшен. Метод записи Compostion API может лучше выполнять встряхивание дерева, уменьшать код, который не вводится в контексте, и уменьшать размер упакованных файлов.
  4. новый片段характеристика. файлы Vue<template>Внутри тега больше нет необходимости принудительно объявлять<div>Метки, экономящие дополнительные накладные расходы узла

🎤 Резюме

Есть еще много преимуществ и новых функций Vue3.Эта статья в основном начинается сVue2/3版本的优缺点а такжеSFC写法变化Эти два аспекта задействованы, и мы расскажем вам, почему мы хотим использовать Vue3.

Vue3 - очень ароматный и лучше поддерживает Tymdercript, что делает Vue3 первым выбором для проектов Vue Projects Enterprise, а также различные новые функции также удовлетворяют тенденцию развития технологии развития.

т.е. браузер: тогда я иду?

👓 наконец

Перевести Перевести Что такое Vue3?

Если эта статья была вам полезна, то, пожалуйста, используйте свою маленькую руку, чтобы поставить лайк 👍, каждый ваш лайк - это большой стимул для меня продолжать творить!

использованная литература

Интервьюер: В каких аспектах в основном отражаются улучшения производительности Vue3.0?

Учебник по Vue3: где Vue 3.x быстр?

разное

Последний день ежегодного списка популярных авторов Nuggets, каждый может проголосовать за нашу команду~IDuxFE@Sangfor Команда разработчиков интерфейсаСпасибо за вашу поддержку~

Категории