VueJS

Question 1

Create the simplest version of a Vue component, (import & use basic javascript to make a component)

Question 2

Vue - Discuss the different ways to create a Vue component. What is a single file component

Question 3

Talk about global state management design patterns

Answer 3

A components local state is the bread and butter of Vue (or the like). However sometime state has to be frequenly passed down or up a number of levels. This might mean you need to move some state to be global.

Global state is carefully managed now, and it is easier to debug what happened, track state history, or define state side effects etc.

Individual components can “dispatch” state changes with “actions”, actions can further “commit” causing “mutations”. Mutations mutate the state.

VueX was the default (what I’ve used). Now the default is Pinia for vue. React uses Redux

Global state management adds considerable boilerplate so really only recommended for complex applications, though it doesn’t take long for it to become necessary.

Question 4

Be able to do some routing

Question 5

Create a fully fledged vue application with the vue cli.

Question 6

Be able to create a component from scratch something like js-fiddle. Demonstrate the following features
- Directives (v-if/v-else etc)
- Importing other components
- List rendering
- Data Binding (v-bind)
- Two way binding (form binding)
- Respond to events, button click for example. Know a few event modifiers (prevent default, stop propogation, etc)
- Pass Props into custom component
- Computed values
- watch statements
- methods
- Template
- Custom events
- Lifecycle hooks
- Slots (single/multiple)

Answer 6

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">
  <h1>
    Hello, World! 
  </h1>
  <p>
    The number is {{myNumber}}
  </p>
  <p v-if="bigNumberFlag">
    Woah there!
  </p>
  <button @click="countUp">
    Count
  </button>
  <input type="number" placeholder="Set Number" v-model="myNumber"/>
  <p v-for="(item, index) in myList" :key="index">
    <child :text="item" @myhover="onItemHover">
      <span style="display: inline-block; border: 1px dashed blue; padding: 8px;">{{item}}</span>
      <template v-slot:secondary><span style="display: block; color: green; font-size: 8px;"> My Description </span></template>
    </child>
  </p>
</div>


<script type="module">
import {createApp} from 'vue';

const childComponent = {
	props: {
  	text: String
  },
  methods: {
  	onHover() {
    	this.$emit('myhover', this.text);
    }
  },
  template: '\
  <span @mouseover="onHover" style="display: inline-block; border: 1px solid red; padding: 8px;">\
    <slot>{{text}}</slot>\
    <slot name="secondary"><span style="display: block; color: #666; font-size: 8px;">secondary text</span></slot>\
  </span>'
}

createApp({
	mounted() {
  	console.log("On Mount!");
  },
	components: {
  	child: childComponent
  },
	data() { 
  	return {
    	myNumber: 3
  	}
  },
  methods: {
  	countUp() {
    	this.myNumber++;
    },
    onItemHover(e) {
    	console.log(e);
    }
  },
  computed: {
    bigNumberFlag() {
      return this.myNumber >= 10;
    },
    myList() {
			let retval = [];
      for (let i = 0; i < this.myNumber; i++) {
      	retval.push(`Item ${i + 1}`);
      }
      return retval;
    }
  },
  watch: {
  	myNumber(newVal) {
    	console.log('Number set to ' + newVal);
    }
  }
}
).mount("#app")
</script>

Question 7

Significant version changes?

Answer 7

Vue 2 -> 3
- Composition API
- Emits Component Option
- SFC state-driven css variables

Vue 2.7 managed to backport features from Vue3 so they are available for dev stuck on Vue 2

Question 8

What are the two Vue api styles and how are they different

Answer 8

Options -

Composition -

Question 9

what is @click shorthand for

Answer 9

<button @click="myMethod">
is equivalent to
<button v-on:click="myMethod">

Question 10

What is v-model shorthand for

Answer 10

<input v-model="text">
is equivalent to
<input :value="text" @input="onInput">

where “text” is a state variable and the component has an onInput method
~~~
methods: {
onInput(e) {
// a v-on handler receives the native DOM event
// as the argument.
this.text = e.target.value
}
}
~~~

Question 11

Draw the lifecycle diagram

Answer 11

Well generally

beforeCreate -> created -> beforeMount -> (initial render) -> mounted -> (data changes) -> beforeUpdate -> updated -> beforeUnmount -> unmounted

Question 12

What are the different ways to install and use Vue

Answer 12

For many scenarios it can be useful to just import directly via a script and cdn.

Installing a Global build (where all top-level APIs are exposed as properties on the global Vue object)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue