Почему за неделю использования Vue я уже влюбился.

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

Единственное, о чем я мог бы судить даже лучше, чем опытный человек, - это кривая обучения фреймворка, учитывая, что я изучил свой самый первый интерфейсный фреймворк около 4 недель назад (это был React). Давайте посмотрим на некоторые функции Vue, которые делают его более интуитивно понятным, чем React.

1) Основные сроки и жизненный цикл

Жизненный цикл Vue делает программирование более интуитивным

Давайте посмотрим на смонтированный этап рендеринга представлений. Это моя любимая часть архитектуры Vue. В этом цикле слева, как только компонент смонтирован, все состояние и свойства, необходимые для рендеринга, вычисляются перед рендерингом. Давайте взглянем на код в React, чтобы понять, почему Vue здесь лучше. Вот крючок кнопки увеличения в React.

import React, { useState, useEffect } from 'react';
import './App.css';
function App( props ){
  const [count, setCount] = useState(0);
  const doStuff = () => {
     console.log(count)
     setCount( count + 1 )
     console.log(count)
  }
  return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={ doStuff }>
      Click me
     </button>
   </div>
);}
export default App;

Несмотря на то, что наш счетчик будет равен 1, наша консоль будет регистрировать

0
0

ПОЧЕМУ??!!??!!

Причина, по которой это происходит, заключается в том, что в жизненном цикле React, когда вы говорите setCount (count + 1), это асинхронная операция, и реагирование не заботится о том, собирались ли вы использовать это состояние для дальнейшей функциональности. И поскольку строка сразу после setCount (count + 1), response немедленно запустит console.log независимо от того, действительно ли было обновлено состояние. Это верно независимо от того, используете ли вы функциональные компоненты с отслеживанием состояния или компоненты классов (поверьте, я пробовал оба способа только для того, чтобы понять, что эта часть реакции - отстой, в любом случае, вы пытаетесь).

Это не делает эти задачи невозможными, но делает алгоритмический процесс немного менее интуитивным и гибким, чем в vue.

Теперь давайте посмотрим на тот же пример во Vue.

<template>
  <div id="app">
    <h1>{{count}}</h1>
    <button @click="increment" >Push Me</button>
  </div>
</template>
export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
methods: {
  increment(){
    console.log(this.count)
    this.count = this.count + 1
    console.log(this.count)
    }
  }
}

Если вы не знакомы с Vue, вот список Vue по сравнению с React, которые должны вам помочь.

  • все внутри тега ‹template› - это в основном HTML с дополнительной функциональностью vue.
  • @ click = "increment" говорит, что когда вы нажимаете кнопку, запускаете метод увеличения.
  • Компоненты Vue написаны в файлах .vue, а не в файлах .js. Это означает, что технически вы пишете не простой Javascript, а в основном Javascript и очень интуитивно понятный.
  • В vue говорится, что что-то вроде this.count = this.count + 1 НЕ МУТАТИВНО, он творит некую магию Vue, которую вы не видите, чтобы без мутаций установить count на какое-то новое значение.
  • В vue у вас есть разные объекты внутри вашего тега скрипта, которые позволяют хранить свойства и функции. вы можете хранить здесь свойства, состояние, функции и некоторые другие интересные вещи о Vuey… подробнее об этом позже.

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

0
1

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

increment(){
    console.log(this.count)
    this.count = this.count + 1
    console.log(this.count)
    }

Верно, Vue был достаточно умен, чтобы вернуть новое состояние, которое вы только что создали. Я считаю, что под капотом Vue все еще устанавливает состояние асинхронно, но он отдает приоритет обновлению этого конкретного состояния всякий раз, когда вы его вызываете (это может привести к некоторому странному поведению в ваших инструментах Vue dev, если вы не знаете, что искать).

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

2) Отличная отладка / линтинг / т. Д. С плагином Vetur Vue.

Одной из самых приятных частей Vue как новичка был процесс отладки вместе с плагином «Vetur». Vetur предоставляет следующие инструменты

  • подсветка синтаксиса
  • фрагменты
  • Эммет
  • линтинг / проверка ошибок
  • форматирование
  • автозаполнение
  • отладка
  • VTI / CLI

Одна вещь, которую Vue делает очень хорошо, - это описание того, как он ломается, и плагин Vetur сообщает вам об этом еще до того, как вы даже взглянете на свой браузер или терминал. Я обнаружил, что каждый раз, когда я получаю красные подчеркивания в моем коде, это связано с проблемой Vue. Затем в 80% случаев, когда я наводил курсор на это красное подчеркивание в VSCode, он выводит меню, в котором в основном говорится именно то, что написано в ошибке браузера.

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

3) Структура

Vue имеет очень красивую и организованную структуру. Каждый компонент фактически будет иметь 3 основные части, каждая со своим собственным тегом в стиле html.

  • ‹Template› → Часть, похожая на JSX
  • ‹Script› → Часть перед оператором return в React, но более организованная
  • ‹Style› → Специфичный для компонентов CSS

Из этих трех частей я должен сказать меньше всего о шаблоне. На самом деле, во многих отношениях мне это не нравится, я просто реагирую (никому не говори). Причина в том, что эта часть содержит много специфичных для vue вещей, которые иногда кажутся не обязательно чужеродными. В ответ JSX действительно выглядит как html с дополнительной функциональностью, но во Vue он ощущается как новый зверь. Немного менее интуитивно понятный, но не слишком сложный, когда вы его освоите.

‹Script›

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

<script>
import CoolComponent from './components/CoolComponent'
export default {
  name: 'RandomComponent',
  components: {
    ChildComponent1,
    ChildComponent2,
  },
  props: {
     shouldThisComponentRender: {
       type: "Boolean",
     }
  },
  data(){
     return {
       randomBoolean:false,
       randomNumber:0,
     }
   },
  methods: {
    doSomething(){
      console.log(this.shouldThisComponentRender)
    },
  },
  computed: {
    functionThatReturnsOppositeOfRender(){
      return !this.shouldThisComponentRender
    }
}
</script>

Если мы заглянем внутрь объекта экспорта по умолчанию нашего скрипта, мы увидим целую кучу вкусностей Vue. Давайте посмотрим на них на секунду

  • name → возвращает имя компонента родительскому компоненту
  • компоненты → позволяет Vue знать, какие дочерние компоненты будут внутри этого компонента (сообщения об ошибках Vue отлично сообщают вам, что именно вы забыли, поэтому, если вы беспокоитесь о том, что забудете все эти шаги, не беспокойтесь)
  • props → точно так же, как props в React, вы должны указать Vue, какие реквизиты вы вводите. хотите сделать ваше приложение более надежным.
  • data → все, что находится внутри данных, работает очень похоже на все, что вы бы поместили в состояние в response. Но vue даже один увеличивает то, что вы можете сделать в реакции, добавляя другой тип состояния, называемый вычисленным, но я вернусь к этому через секунду.
  • методы → эти методы в точности похожи на метод, который вы бы написали внутри компонента реакции. Вы можете запускать их из событий или методов жизненного цикла, а затем они делают все, что находится внутри них, в указанном порядке.
  • computed → внутри этого объекта - еще одна вещь Vuetiful. Функции внутри вашего вычисляемого объекта существуют для ВОЗВРАТА ВЫЧИСЛЕННОГО СТАТИСТИЧЕСКОГО ЗНАЧЕНИЯ. Например, если в ваших данных есть свойство username, вы можете иметь вычисляемое свойство с именем usernameLength, поместив функцию в ваш вычисляемый объект.
usernameLength()=>this.username.length

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

Заключение

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