My first Reactions to Vue

So the current project I am working on is in Vue. Which is similar to React but just different enough to make things slightly confusing. So here I am just going to babble and hope to sort things in my head as I go. So unorganized short thoughts, and probably more to come next week as I'm using Tailwind in the project.

Creating a component in React has made a ton of sense to me in the past but Vue seems slightly more organized.
In React you can simply do a functional with a return

import React from 'react'

function ImAComponent (props){
  return(
     <div>
       Hey I'm a Component!
       <p> {{props.message}} </p>
     </div>
  )
}

It's a function so the return is what you get out. Props are passed in as an argument, and can be rendered in {{}}.
In a class component it is slightly different where you have render() as the function that returns the JSX (html) logic. Props can be accessed through this.props.
In Vue all your HTML faked in lives in the template side. So here is the basic snippet for an empty Vue component.

<template>
  <div>
     I'm a Vue Component
  </div>
</template>
<script>
  export default {
    name: "ImAComponent",
    props: {
      message: {
          type: String,
          default: "I'm A Prop",
          required: false 
          }
     }
  }
</script>
<style scoped>
</style>

So you can see here you have the template up top, but all your real business logic is in the script area. This is also where you would import anything else that you need. But this is where all the business logic will live. Where as react you can have things all over the place. Props are part of the declared values in each component in Vue. You have to know what you expect.

TypeScript is making this more of a necessity in React but regular old React you'll get errors and not know if you have random props being passed in. You get a TypeScript light implementation with Vue, declaring what types should be expected. Since I have started in VueX instead of Vanilla Vue, I have not gone through $emitting functions as of yet, but that will handle functions a level above being passed as a prop. VueX is very similar to redux with store implementations and allowing state to be shared across components.

That brings us to something else... what about state??!?! Well with functional React components with useState and setting variables causing a rerender. as well as this.setState for a class component. This is all kept in the data portion of the script.

<script>
  export default {
    name: "ImAComponent",
    props: {
      message: {
          type: String,
          default: "I'm A Prop",
          required: false 
          }
     },
   data (): {
  return {
   current: "I'm part of the state"
      }
    }
 }
</script>

So the tricky thing to remember here is that data is a function and acts like an object. There are some weird quirks of Vue that I'm still getting the handle of. In the script to reference the data in a method you use this.current, but in the template vue you can access it in the body of the html as {{ current }}. Also binding things in the template body is also interesting.

Let's dive into what I mean by binding. I will admit this is something I have come to very much appreciate from Vue. It took some getting used to.

<div v-if="boolean here">

</div> 

That will only render if the statement there evaluates to true! Oh man that is so much prettier than the ternary stuff that happens in React. You can also do v-show Which is a css display option.
Another thing is for loops are much prettier in vue
Say you have an array of people

[
  {name: "Hal', 
  id: 2001},
  {name: "ValJean",
   id: 24601},
  {name: "Jenny",
   id: 8675309}
]

<ul>
  <li v-for='person in people' :key='item.id'>
    {{person.name}}
  </li>
</ul> 

`
Everything is encapsulated, you're not mapping it's just all nice and tidy in that function

• Hal
• Valjean
• Jenny

Will be how it renders... the key is still present since you have the virtual dom keeping track of updates, but hey there is a : before key, why is that. : before something means to treat it as a javascript variable or function and not a string. It's how you can interpolate which is the equivalent of react's use of {}.

The last thing I will speak of my appreciation of view is the sections of computed and methods. So again these live in the land of the script. Methods just make sure you have all your functions in one place, it's a nifty way to keep organized. Depending on sprawling you React logic is, you can get lost. Also computed is neat of you have to do math, you can have it run once and have to perform that function in the render just the load. So that has some performance value on re-renders which is kind of cool.

Anyway I'm sure I will have more to say about vue in the future but it's kind of fun.