Не спорьте о том, какая библиотека Javascript лучше  — все дело в предпочтениях

Снова и снова мы слышим одни и те же аргументы, но все они способны достичь одних и тех же целей.

Введение

Снова и снова я захожу в Твиттер и сталкиваюсь с одним и тем же обсуждением: React лучше; Vue лучше; вы слышали о Svelte? Мне также сказали, что Angular все еще актуален. Однако, если вы внимательно изучите языковые функции каждого из них, вы увидите минимальные различия, помимо применения указанных функций. В этой статье я в основном сосредоточусь на React и Vue, поскольку это две технологии, в которых у меня больше всего опыта.

Виртуальный дом

Одной из наиболее важных общих черт является использование виртуального DOM. Виртуальный DOM — это абстракция HTML DOM, где каждый элемент HTML является объектом JavaScript. Этот подход обеспечивает некоторый прирост производительности и позволяет более декларативно манипулировать DOM.

Методы жизненного цикла

Обе библиотеки позволяют нам подключаться к этапам жизненного цикла компонентов с помощью ряда методов. В React нам даются следующие методы:
- componentDidMount для начального монтирования,
- componentDidUpdate для обновления props/DOM
- componentWillUnmount, когда компонент исчезнет.

Это немного отличается, если вы пишете функциональные компоненты React; вместо использования методов жизненного цикла вы можете использовать хук useEffect для эмуляции этого поведения.

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

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

useEffect(() => {
 console.log("I'm mounted")
 return () => console.log("I'm unmounting")
}, [])

Когда мы предоставляем useEffect массив зависимостей, он будет обновляться при обновлении этих зависимостей:

useEffect(() => {
 console.log("test prop has changed")
}, [testProp])

Во Vue у нас есть похожие методы, но их намного больше:

beforeCreate, это первый хук, который вызывается после создания экземпляра Vue.

<script>
  export default {
    beforeCreate() {
      console.log('beforeCreate hook called');
    }
  }
</script>vue

Created, который вызывается следующим, а также дает нам первый доступ к данным, свойствам и т. д.

<script>
  export default {
    data() {
      return {
        msg: "Hello World",
      }
    }
    created() {
      console.log('created hook called', this.msg);
    }
  }
</script>

beforeMount, который вызывается перед монтированием Vue в DOM (здесь нельзя выполнять никакие манипуляции с DOM)

<script>
  export default {
    beforeMount() {
      console.log('beforeMount hook called');
    }
  }
</script>

смонтирован, когда это вызывается, компонент работает и готов к работе;

<script>
  export default {
    mounted() {
      alert('mounted has been called'); 
     }
  }
</script>

beforeUpdate, который вызывается каждый раз при обновлении данных, требующем обновления модели DOM.

<template>
  <p> 
    {{ msg }}
  </p>
</template>

<script>
   export default {
     data() {
       return {
         msg: "Hello World",
       }
     },
     beforeUpdate(){
       console.log('beforeUpdate hook called');
     },
     mounted(){
       this.＄data.hello= 'This is a medium artice!';
     }
   }
</script>

updated, который вызывается сразу после обновления DOM;

<template>
  <p> 
    {{ msg }}
  </p>
</template>

<script>
   export default {
     data() {
       return {
         msg: "Hello World",
       }
     },
     beforeUpdate(){
       console.log('beforeUpdate hook called');
     },
     updated(){
       console.log('updated hook called');
     },
     mounted(){
       this.＄data.hello= 'This is a medium article!';
     }
   }
</script>

beforeDestroy, который вызывается непосредственно перед уничтожением экземпляра Vue (в основном используется для управления ресурсами)

<script>
   export default {
     data() {
       return {
         msg: "Hello World!",
       }
     },
     beforeDestroy() {
       console.log('beforeDestroy hook called');
       this.msg = null
       delete this.msg;
     }
  }
</script>

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

<script>
   export default {
     destroyed() {
       this.＄destroy() 
       console.log('destroyed hook called')
     }
   }
</script>

Реквизит

Если мы сравним Vue и React с точки зрения того, как передаются реквизиты, основное различие заключается в синтаксисе. В Vue Props можно объявить заранее, используя опцию «props», например:

<template>
  {{title}}
</template>
export default {
  props: {
     title: String 
  },
}

В React к свойствам можно получить доступ по-разному в зависимости от типа компонента. Для функциональных компонентов реквизиты передаются функции в качестве аргумента. Для компонентов на основе классов доступ к свойствам осуществляется с помощью ключевого слова this.

const MyComponent = ({ title }) => <h1>{title}</h1>;
class MyComponent () {
 render() {
    return <h1>{this.props.title}</h1>
 }
}

При передаче свойств в Vue принято использовать camelCase при объявлении имен свойств в определении компонента и kebab-case при использовании свойств в HTML-шаблоне. Это согласуется с соглашением об атрибутах HTML и упрощает работу с реквизитами. Компилятор Vue автоматически преобразует свойства kebab-case в camelCase в определении компонента, поэтому вам не нужно беспокоиться о кавычках или любом другом синтаксисе. Важно отметить, что это соглашение строго соблюдается только в шаблонах Vue DOM. Для получения дополнительной информации обратитесь к документации Vue здесь.

<template>
   <MyComponent blog-title="blog title" />
</template>
// in the my component file
export default {
   props: {
   title: String 
 },
}

Выводы

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

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.