Vue: General Concepts

Review and refresh.

Like React, Vue provides multiple ways to define a Component:

1. <script setup> (loosely analogous to a Stateless Dummy Function).
2. non-<script setup> (export default {})

Unlike React, both support Lifecycle Hooks (the former within the <script setup> Tags with the Composition API and the later within setup(props, context) {} using the Options API.)

Resources and Links

1. https://vuejs.org/guide/introduction.html

Code samples:

1. https://github.com/Thoughtscript/laravel_php_2026
2. https://github.com/Thoughtscript/vue_2022
3. https://github.com/Thoughtscript/x_team_vue

Vue: Components

Props

Vue vs. React:

1. Passed from Parent to Child (as in React).
2. Generally uni-directional but can be bound with v-model two-way.

Examples:

<script setup>
const props = defineProps(['myVar'])

console.log(props.myVar)
</script>

export default {
  props: ['myVar'],
  setup(props) {
    console.log(props.myVar)
  }
}

Computed Properties

For complex logic and Templating scenarios. Two general methods:

1. Computed Properties/Caching
2. Computed Methods

The following Computed Properties is only called in response to reactive changes (to myReactiveData, e.g. - Computed Caching):

<script setup>
import { reactive, computed } from 'vue'

// Suppose 'msg' is updated...
const myReactiveData = reactive({
  id: 1,
  msg: "my note"
})

const computedRefAndPropertyForReactiveMsg = computed(() => {
  return myReactiveData.msg
})
</script>

<template>
  <span>{{ computedRefAndPropertyForReactiveMsg }}</span>
</template>

By contrast, a Computed Methods is always called:

<script setup>
const computedRefAndPropertyAlwaysInvoked = () => {
  return "I'm always invoked"
}
</script>

<template>
  <span>{{ computedRefAndPropertyAlwaysInvoked }}</span>
</template>

State

<script>
export default {
  data() {
    return {
      dataProperty: "I'm an initial Value - not a placeholder"
    }
  },
  methods() {
    myMethod() {
        this.dataProperty = "I'm a set Value!"
    }
  }
}
</script>

Resources and Links

1. https://vuejs.org/guide/components/props.html
2. https://dev.to/naseerhines/passing-props-vuejs-vs-react-1hn4
3. https://vuejs.org/guide/essentials/computed.html

Vue: Components

Different syntax:

Vue.component('component-name', {
  props: ['myProp'],
  template: 'Rendering: <span>{{ myProp }}</span>'
})

<script setup>
// my code here
</script>

export default {
  props: {},
  setup(props, context) {}
}

Hooks

Lifecycle Hook example:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    loadExamples()
})
</script>

Unlike in React, both <script setup> and non-<script setup> Components support Lifecycle Hooks:

1. Between <script setup> Tags (use the Composition API e.g. - onMounted())
2. Within the Scope of setup(props, context) {} (use the Options API e.g. - mounted())

Setup Hook:

export default {
  props: {},
  setup(props, context) {
    const myVal = ref("a")
    return {
      myVal
    }
  }
}

Use ref to associate Vue with changes to myVal (unlike React). myVal is returned and can be used elsewhere in the Template.

Lifecycle Hooks

Main Lifecyle stages:

1. Created
   • Only accessible through the Options API
   • Instance creation but before Observables, (most) Event Listeners, DOM
2. Mounted
   • Added to DOM
3. Updated
   • Updating Values
4. Unmounted
   • Component cleanup
   • Deattaching the Component from the DOM

Options API

Main Lifecyle stages:

1. created (beforeCreated)
2. mounted (beforeMounted)
3. updated (beforeUpdate)
4. unmounted (beforeUnmount)

DOM Lifecycle stages:

1. activated, deactivated
2. renderTracked, renderTriggered

Misc Lifecycle stages:

1. errorCaptured
2. serverPrefetch

https://vuejs.org/api/options-lifecycle.html

Composition API

Main Lifecyle stages:

1. onMounted (onBeforeMounted)
2. onUpdated (onBeforeUpdated)
3. onUnmounted (onBeforeUnmounted)

DOM Lifecycle stages:

1. onActivated, onDeactivated
2. onRenderTracked, onRenderTriggered

Misc Lifecycle stages:

1. onErrorCaptured
2. onServerPrefetch

https://vuejs.org/api/composition-api-lifecycle.html

State

<script>
export default {
  data() {
    return {
      dataProperty: "I'm an initial Value - not a placeholder"
    }
  },
  methods() {
    myMethod() {
        this.dataProperty = "I'm a set Value!"
    }
  }
}
</script>

https://vuejs.org/api/options-state.html

Resources and Links

1. https://vuejs.org/api/composition-api-lifecycle.html
2. https://vuejs.org/api/composition-api-lifecycle
3. https://vuejs.org/api/options-state.html

Code samples:

1. https://github.com/Thoughtscript/laravel_php_2026/blob/main/laravel/example-app/resources/js/components/ExampleRestApiPutPanel.vue

Vue: Directives

1. v-show
   • Conditional Elemental rendering based on Truthiness of a supplied Property.
   • Toggles: display: none.
   • Immediate rendering.
   • v-show="myToggle"
2. v-bind
   • Bind an Attribute or Value to Expression or Prop.
   • Shorthand :
   • Example: v-bind:class="classDataProperty (:class="classDataProperty)
3. v-on
   • Bind an Element to an Event Action.
   • Shorthand @
   • v-on:click="myToggle = !myToggle" (@click="myToggle = !myToggle")
   • Examples:

     <div v-on:click="displayMessage">
       {{ message }}
     </div>
     

4. v-model
   • Two way Form binding.
   • v-model="modelName"
5. v-for
   • Render List of Elements:

     <div v-for="x in myList">
       {{ x.id }}
     </div>
     

6. v-if
   • Conditionally render an Element or Template based on the Truthiness of the Expression Value.
   • Removes or adds to DOM.
   • Lazy loading.
   • Can be combined with v-else-if and v-else.

Resources and Links

1. https://vuejs.org/api/built-in-directives.html