Компоненты Vue.js

Lesson 6, Advanced JS, Bondarchuck

by shurikation

Vue

//Во Vue вы НЕ работаете с DOM самостоятельно!

//Методы - нужны для выполнения логики 

//Computed - идеологически, это просто методы, которые вычисляются.
//Vue их кэширует, и не перевычисляет, если они не меняются

//1. Дз - функцию filtredItems можно просто вынести в computed и таким образом поиск станет реактивным т.к. Vue будет самостоятельно вычислять
// c 0:09 минуты - перенос свойства 

//Vue, React, Angular - это компонентно-ориентированные фреймворки. КОмпонетно-ориентированный подход позволяет создавать нечто вроде собственных HTML-тэгов. Мы создаем собственный тэг со своей логикой, атрибутами, событиями и внутренней логики. Почему именно компоненты? С ростом сложности приложения, бизнес-логики сложно сопровождать без компонентнов. 

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

//Сложно разрабатывать приложение, если 10 разработчиков копаются в одном и том же файле. Если все 100 человек будут колупаться в одном месте. И чтобы у каждого была своя зона отвественности - приложения дробят на логические части - каждые знаимаются своим.

//Можно разделить наш проект, например, на каталог и корзину.

Vue.component('', {}) //Такое объявлегние/создание компонента регистрирует его для всего приложения целиком - для всех приложений, которые сделаны на Вью. С т.з. изоляции это не ок. Чтобы мы могли компоненты раскладывать на файлы, чтобы сделать задел на будущее, можно сделать компонент с помощью переменных:

//НазваниеКомпонентаComponent - таким образом лучше называть
const HelloWOrldComponent = {};
 
//В приложении создаем блок compoents:
//...
//В этом блоке перечисляем какая переменная соотвествует какому компоненту:
const app = new Vue({
	el:...