Vue.js

Введение в Composition API

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

На данный момент, если вы работали в Vue, вы использовали то, что называется Options API. Options API организует код по свойствам: и так далее.

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

Пойдем по порядку и разберемся с тем, что здесь происходит.

API Vue Composition описывает множество основных функциональных возможностей Vue, таких, как реактивность и компонентные методы. Поэтому мы должны импортировать их.

Применение является одним из самых больших изменений в Vue3. По сути, он позволяет определить, какие данные/функции передаются из компонента обратно в шаблон. Всё, что он возвращает — доступно в шаблоне.

Мы можем задавать реактивные данные, хуки жизненного цикла, вычисляемые свойства, определённые методы и возвращать всё, что захотим.

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

Следует отметить, что мы объявляем переменную . Как видите, она является computed-свойством и определяется прямо в методе . Больше нет никаких отдельных вычисляемых свойств, теперь в одном месте определяются и и свойства!

Это просто определение типичных старых функций. Единственное, что тут действительно уникально, это то, что поскольку все реактивные данные хранятся в объекте состояния, мы должны сохранить его в переменную и обращаться к его своствам. Но это не специфично для Vue3 — это просто обычные объекты на Javascript.

Наконец, мы возвращаем эти данные из метода setup(). Что делает эти данные и методы доступными внутри шаблона. К счастью, код шаблона все так же сохраняет прежний формат описания.

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

Если вы уже хотите начать практиковаться, вы можете использовать API Vue Composition в своих проектах.

Сравнение с другими фреймворками

О сравнении Vue.js с другими фреймворками можно прочитать на официальном сайте проекта.

Если кратко, то Vue похож на React, например, в том, что оба фреймворка используют Virtual DOM и фокусируются на корневой библиотеке; это фреймворки с высокой производительностью и они оба предоставляют хорошие решения для масштабирования. Но отличия, естественно, тоже присутствуют: React имеет более обширную, но и более фрагментированную экосистему, в то время как Vue поддерживает все дополнительные библиотеки в актуальном соответствии с ядром библиотеки.

Что касается AngularJS, то он также значительно повлиял на Vue, однако, в отличие от него, Vue значительно более прост в изучении, а также является более гибким и модульным решением, чем Angular, который придерживается жесткой структуры приложения. Если сравнивать производительность этих двух фреймворков, то Vue производительнее и более прост в оптимизации (хотя если сравнивать Vue.js с Angular 2, то оба фреймворка показывают примерно одинаковую производительность, Vue лишь слегка обгоняет Angular 2).

По словам Эвана Ю, React в основном используют те, кто любит функциональный стиль программирования, Angular — те, кто ранее программировал на Java или С#. А Vue нравится тем, кто предпочитает более классическую модель разработки.

Использование метода mapGetters

Существует еще более простой способ доступа к элементам списка дел внутри компонента с помощью метода mapGetters, предоставляемого Vuex.

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

Обратите внимание, как мы использовали оператор распространения ES6 внутри наших вычисленных свойств. ХРАНИЛИЩЕ VUEX НЕ ПРОСТО ИСТОЧНИК ТЕКУЩЕГО СОСТОЯНИЯ ВАШЕГО ПРИЛОЖЕНИЯ

ОНО ТАКЖЕ ЯВЛЯЕТСЯ ЕДИНСТВЕННОЙ ТОЧКОЙ, КОТОРАЯ ДОЛЖНА ИЗМЕНЯТЬ ЭТО СОСТОЯНИЕ

ХРАНИЛИЩЕ VUEX НЕ ПРОСТО ИСТОЧНИК ТЕКУЩЕГО СОСТОЯНИЯ ВАШЕГО ПРИЛОЖЕНИЯ. ОНО ТАКЖЕ ЯВЛЯЕТСЯ ЕДИНСТВЕННОЙ ТОЧКОЙ, КОТОРАЯ ДОЛЖНА ИЗМЕНЯТЬ ЭТО СОСТОЯНИЕ.

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

В Интернете вы можете найти различные мнения на этот счет. В документации также нет четких указаний касаемо этого.

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

Теперь вы можете использовать Suspense в Vue

Suspense — это функция React, которую добавили и в Vue3. Она позволяет вашему компоненту отображать временное содержимое (заглушку) до тех пор, пока ваш основной контент страницы не будет готов к отображению. Например, как часто бывает, что мы открываем страницу, и видим прелоадер, который пропадает только когда вся бизнес-логика на странице отработает.

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

Suspense будет полезен для:

• Создания страниц с загрузкой
• Ожидания ответов от API для обработки
• Подходит для любого вида получения данных по API или асинхронной загрузки

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

Когда используются компоненты без рендеринга?

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

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

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

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

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

Возможно, пользователь захочет поместить данные компонента в <ol> или даже использовать <table>. В этом случае хорошим решением может быть компонент без рендеринга.

Демо B: Vue Hooks

Вы можете легко воссоздать эту логику с помощью Vue Hooks, цель Hooks — потенциально заменить миксины в будущем. Прежде всего, вы должны установить пакет vue-Hooks с помощью менеджера пакетов. Откройте новый терминал в VS Code и запустите:

Затем откройте ваш файл main.js и инициализируйте Hooks с помощью командной строки перед новым оператором Vue:

Vue.use(Hooks);

Откройте папку компонентов и создайте внутри нее новый файл, назовите его Modal.vue, затем вернитесь в корневой каталог и создайте новую папку с именем Hooks. Внутри папки Hooks создайте новый файл с именем Hooks.js и скопируйте в него следующий блок кода:

import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'

export default function clickedHook(){
  const data = useData({ count:1 })
  const double = useComputed(() => data.count * 2)
  useMounted(()=> {
    console.log('mounted')
  });
  useUpdated(()=> {
    console.log('updated')
  });
  useEffect(()=> {
     console.log('DOM re-renders....')
   });
  return {
     data, double
  }
}

Как и в React, Vue Hooks заимствует синтаксис префикса использования и использует его способом принятым во Vue. Вы также заметили, что хуки жизненного цикла, доступные для каждого экземпляра Vue, доступны внутри хуков Vue, вот некоторые из них:

• : выполняет инициализацию данных внутри вашего хука, поэтому счетчик инициализируется внутри него
• : это больше похоже на вычисляемые свойства внутри вашего хука, поэтому двойное вычисление выполняется внутри него
• : действует точно так же, как смонтированный Hook жизненного цикла в вашем экземпляре Vue, но для Hooks
• : действует точно так же, как обновленный хук жизненного цикла в вашем экземпляре Vue, но для хуков
• : это обрабатывает логику при повторном рендере DOM

Есть и другие свойства, которые вы можете импортировать, весь список можно найти здесь, на GitHub. Вы заметите, что он экспортируется как функция, откройте файл modal.vue, который вы создали ранее, и скопируйте нижеприведенный блок кода внутри него:

<template>
  <div> 
    <button v-on:click="data.count++">Button 2</button>
    <h2>`data`.`count`</h2>
    <h2>`double`</h2>
  </div>
</template>
<script>
import clickedHook from '../Hooks/Hooks'

export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
</script>

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

Важно отметить, что …

• Вы можете пойти дальше и сразу использовать Vue Hooks (ваша версия Vue должна быть 2.x)
• Существует официально
• Он экспериментален и поэтому не должен использоваться в продакшине
• Прочитайте пост в блоге Сары Драснер, который также содержит еще больше примеров

Вы можете использовать npm или просто перейти на GitHub по этой ссылке, чтобы получить репозиторий проекта.

Программная проверка экземпляра компонента Vue

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

Запуск обновления prop значения

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

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

<template>
  <h1>` msg `</h1>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
};
</script>

Поиск экземпляра компонента Vue

Для начала нам нужно найти элемент верхнего уровня компонента с помощью панели элементов Chrome devtools. В данном случае это элемент h1.

Использование команды $0

После того, как вы выбрали элемент, вы можете перейти к панели консоли в devtools и ввести $0.

$0 будет ссылкой на последний выбранный элемент на панели элементов.

Чтобы увидеть подробную информацию об экземпляре Vue, введите $0.__vue__.

Использование метода document.querySelector

Вы также можете выбрать элемент, используя любой из методов поиска DOM, таких как querySelector или getElementById и т. д. В этом случае мы будем использовать document.querySelector, чтобы увидеть экземпляр Vue:

document.querySelector('').__vue__

Здесь мы используем поиск элемента через его атрибут данных, но вы можете использовать любой допустимый селектор CSS в querySelector.

Определение значения переменной в prop

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

Добро пожаловать в Vue.js! Здесь вы можете увидеть все свойства объекта, которые Vue прикрепил к компоненту. Если вы используете какие-либо плагины, такие как Vuex или vue-i18n, вы также увидите здесь ссылку на них.

Давайте продолжим нашу задачу по обновлению значения в prop. Посмотрите внимательно, и вы увидите нашу переменную msg прямо посередине, нажмите на три точки, и вы увидите ее текущее значение.

Вы можете просмотреть значение всех свойства prop самостоятельно, используя предпочитаемую вами команду в консоли:

// Using $0
$0.__vue__.msg

// Using querySelector
document.querySelector('').__vue__.msg

Обновление значения в prop

Обновление значения в prop теперь является случаем обновления назначения переменной до желаемого значения. Так, например, используя описанную выше технику $0, вы набираете это в консоли:

$0.__vue__.msg = 'Hello from the updated value!'

И вот, вы увидите обновление пользовательского интерфейса прямо на ваших глазах!

Dynamic Components

Sometimes, it’s useful to dynamically switch between components, like in a tabbed interface:

` tab `

The above is made possible by Vue’s element with the special attribute:

In the example above, can contain either:

• the name of a registered component, or
• a component’s options object

See this example to experiment with the full code, or this version for an example binding to a component’s options object, instead of its registered name.

Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes will be bound as DOM attributes. For some properties such as to work as you would expect, you will need to bind them using the .

That’s all you need to know about dynamic components for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Dynamic & Async Components.

Создание нашего первого теста

Теперь мы можем начать создавать наши тесты. Давайте начнем с нашего первого компонента, UserView, помня, что мы используем jest в качестве основы наших тестов.

Это будет интеллектуальный компонент, и он будет связываться с store для поиска пользователей Github.

Давайте создадим тогда файл: 

describe('UserView', () => {
  it('works', () => {})
})

И мы можем запустить тесты: 

Our first test

Но что именно мы тестируем в наших компонентах?

Мы можем проверять многие вещи, но мы должны опираться на следующие идеи:

Если он правильно все рендерит

Если мы гарантируем, что компонент выполняет рендеринг, мы можем проверить, правильно ли он выполняет рендеринг. У нашего компонента есть кнопка и элемент input, или он может содержит кнопку и комментарий, говорящий «Input will be implemented in v2».

Крайние случаи

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

Продолжим создания нашего компонента

Зная это, нам нужно сделать напишем наш тест. Давайте реализуем первый случай, все ли правильно рендериться в UserView:

import { shallowMount } from '@vue/test-utils'
import UserView from '@/views/UserView'

describe('UserView', () => {
  it('renders the component', () => {
    // arrange
    const wrapper = shallowMount(UserView)

    // assert
    expect(wrapper.html()).toMatchSnapshot()
  })
})

Мы используем jest в качестве нашей тестовой среды и vue-test-utils, чтобы помочь в работе с нашими компонентами.

В строке 7 мы используем shallowMount для создания экземпляра нашего компонента. Это означает:

Эта функция создает только первый уровень его зависимостей

Shallow mount renders only our component’s first level

Vue-test-utils также предоставляет другой метод mount, который создает полное дерево зависимостей.

Here we fully render the whole components’ tree from the rendering component

Но для нашего случая уже достаточно shallowMount.

В строке 10 мы берем wrapper, который является представлением нашего компонента, созданного vue-test-utils, а затем мы «фотографируем» html нашего компонента (создаем snapshot). Этот HTML существует благодаря vue-test-utils.

Запустив npm run test:unit, мы получили первую ошибку

RED

Компонента по-прежнему не существует. Теперь мы находимся в фазе TDD, где мы наконец можем создать наш файл.

//views/UserView.vue
<script>
export default {
  name: 'UserView'
}
</script>

<template>
  <div>
    UserView
  </div>
</template>

Здесь мы создали минимальное представление нашего компонента, и благодаря этому у нас есть первое прохождение теста, которое выполняется после запуска команды: npm run test:unit

GREEN

Но что такое этот snapshot?

По сути, jest сделал «снимок» html нашего компонента, и если мы проверим каталог, внутри tests то там будет создан файл __snapshots__/UserView.spec.js.snap с содержим html компонента.

Теперь у нас есть ссылка на наш компонент, и в случае каких-либо изменений в его html наш тест не будет проходить.

Внести изменения в UserView.vue и убедитесь, что тест не будет проходить

<script>
export default {
  name: 'UserView'
}
</script>

<template>
  <div>
    Hello World
  </div>
</template>

Our test failing due to the html alteration

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

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

Snapshot testing

Для этого вам нужно после запуска команды npm run test:unit:watch всего лишь нажать u на терминале, и snapshot будет обновлен автоматически . Чтобы увидеть больше опций, вам нужно нажать w в терминале, чтобы открыть список опций шутки.

Updated snapshot, GREEN

НИКОГДА не изменяйте файл snapshot вручную.

# Getting Started

TIP

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step — grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the Hello World example(opens new window). Feel free to open it in another tab and follow along as we go through some basic examples.

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with , especially if you are not yet familiar with Node.js-based build tools.

Роутер

Причина одной из самых тяжелых психологических травм которую я получил от Angular — роутер.
Несмотря на то, что переписывался он уже трижды, он все еще ужасен (да, я повторяюсь).

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

1. Нет именованных роутов (!) — одно из самых странных решений, которое можно было принять это убрать именованные роуты, тем самым понизив удобство поддержки сложных приложений в разы
2. Странная система ивентов, проверять которые нужно по типу,
3. Превращение параметров роута в Observable — порой с ними крайне неудобно работать если они вам нужны только 1 раз при старте компонента
4. Для навигации были придуманы команды, очень странное и мало полезное решение, более не используемое ни в одном роутере
5. Lazy Loading через строковое название модулей, в приложении полностью на TypeScript… без комментариев
   … и т.д.

Если посмотреть сорцы, можно понять что многие из указанных проблем связаны со сложностью и функциональностью роутера.

То есть, даже не будь в нем странных решений вроде команд, количество фич все равно делает его сложным и тяжелым.

Во Vue роутер предельно простой и рабочий.

Говоря простой, надо упоминуть, что в свое время я не обнаружил привычного по Angular параметра .

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

Плохо ли то, что подобной функциональности нет из коробки?

И да и нет, ведь с одной стороны важно насколько легко проблема решается, а с другой — сложность и скорость работы самого роутера (в противовес навороченности Angular). Кстати, вот классная штука:

Кстати, вот классная штука:

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

Валидация форм

Что несколько удивило после Angular — из коробки во Vue нет валидации форм. Хотя, казалось бы, фича весьма востребованная.

Впрочем, это не беда, есть два наиболее популярных решения для этой задачи.

vee-validate

Первое — это весьма схожий механизм с template-driven формами в Angular — vee-validate.

Фактически вы описываете всю логику валидации в HTML.

Я бы сказал, что данный подход подойдет только для относительно небольших/несложных форм.
В реальности валидация зачастую бывает весьма навороченной, и описывать все в HTML становится неудобно.

Плюс это не очень красиво работает с Vuex.

vuelidate

Второе решение — Vuelidate. Невероятно элегантный способ валидации почти любых компонентов — валидируется сама модель, а не тот или иной input.

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

Очень рекомендую при необходимости валидации форм сразу рассматривать Vuelidate — он отлично работает (в том числе с Vuex), легко подключается и кастомизируется.

Используйте vue-router для роутинга на клиенте

Если вы осуществляете роутинг на клиенте, то написать своё решение в целом не сложно. На самом деле это просто — сопоставить маршруты и поменять после этого компоненты.

Однако использование ещё проще! К тому же, это официальный пакет Vue, поэтому вы можете не беспокоиться по поводу совместимости и поддержки.

И как только вы начнёте работать с:

• запросами
• параметрами маршрута
• вложенными маршрутами
• динамическим сопоставлением маршрутов
• транзишенами

…а вы, скорее всего, начнёте с этим работать, то написание своего решения станет слишком сложным, громоздким. Поэтому вместо этого читайте гайд по vue-router от Эда Зынды «Начало работы с Vue Router».

Поэтапный процесс выпуска

Выпуск Vue 3.0 отмечает общую готовность фреймворка. Хотя некоторым из подпроектов фреймворка может потребоваться доработка для достижения стабильного статуса (в частности, интеграция маршрутизатора и Vuex с devtools), мы считаем целесообразным начинать новые проекты с нуля на Vue 3 уже сегодня. Мы также рекомендуем авторам библиотек начать обновление ваших проектов для поддержки Vue 3.

Ознакомьтесь с для получения подробной информации обо всех подпроектах фреймворка.

Миграция и поддержка IE11

Мы отодвинули сборку миграции (сборка v3 с поведением, совместимым с v2 + предупреждения о миграции) и сборку IE11 из-за ограничений по времени, и планируем сосредоточиться на них в четвертом квартале 2020 года. Поэтому пользователи, планирующие миграцию существующего приложения v2 или требующие поддержки IE11 должна знать об этих ограничениях в настоящее время.

Следующие шаги

В ближайшее время после релиза мы сосредоточимся на:

• Сборка миграции
• Поддержка IE11
• Интерграция Router и Vuex с новым devtools
• Дальнейшие улучшения вывода типа шаблона в Vetur

В настоящее время веб-сайт документации, ветки GitHub и теги npm dist для проектов Vue 3 будут оставаться со статусом next. Это означает, что команда npm install vue по-прежнему будет устанавливать Vue 2.x, а npm install vue@next установит Vue 3. Мы планируем к концу 2020 года переключить все ссылки на документы, ветки и теги dist на 3.0 по умолчанию.

В то же время мы начали планировать выпуск 2.7, который будет последним запланированным выпуском линейки выпусков 2.x. 2.7 будет выполнять обратный перенос совместимых улучшений из версии 3 и выдавать предупреждения об использовании API, которые были удалены/изменены в версии 3, чтобы помочь с потенциальной миграцией. Мы планируем работать над 2.7 в первом квартале 2021 года, который сразу станет LTS после выпуска с 18-месячным сроком поддержки.

Что такое фреймворк

Фреймворк (framework) можно рассматривать как некий каркас для создания приложений на определенном языке программирования. Он включает в себя набор библиотек, которые позволяют значительно упростить и убыстрить разработку приложений. Также цель фреймворка – это предоставление такой среды разработки, которая позволит дорабатывать и расширять функционал проекта.

Наглядно отличие фреймворка от библиотеки можно объяснить вот так:

Фреймворк использует определенную архитектуру приложения для того, чтобы проект был разделен на логические части, модули. Например, схема разделения Model-View-Controller (MVC) подразумевает разделение на три сегмента: модель, представление и контроллер, каждый из которых можно изменять независимо от других.

Если говорить более упрощенно, то существует множество типовых задач, которые приходится решать разработчикам – и поэтому часто используются библиотеки. Использование фреймворка позволяет избежать отдельного «складирования» полезного материала где-нибудь в отдельной папке либо постоянного написания однотипного кода: фреймворк позволяет использовать встроенные классы для валидации, логирования и многих других процессов, а также имеет структуру, которую в итоге получает проект.

Фреймворки имеют массу преимуществ, именно поэтому они используются практически повсеместно. Это:

• удобная и быстрая разработка приложения;
• чистый код, который (чаще всего) не требует рефакторинга.

Но у использования фреймворка есть и недостатки (и забывать о них не стоит):

• слабая защищенность из-за открытого исходного кода;
• нужно потратить определенное время и усилия на изучение фреймворка;
• каждый фреймворк нужно изучать отдельно (нельзя разобраться в одном фреймворке и начать понимать, как работать со всеми).

Data and Methods

When a Vue instance is created, it adds all the properties found in its object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

When this data changes, the view will re-render. It should be noted that properties in are only reactive if they existed when the instance was created. That means if you add a new property, like:

Then changes to will not trigger any view updates. If you know you’ll need a property later, but it starts out empty or non-existent, you’ll need to set some initial value. For example:

The only exception to this being the use of , which prevents existing properties from being changed, which also means the reactivity system can’t track changes.

In addition to data properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with to differentiate them from user-defined properties. For example:

In the future, you can consult the for a full list of instance properties and methods.