Superfast Introduction to Vue 3

Praveen Puglia

@praveenpuglia

praveenpuglia.com

@vuehyd

hyd.vue.community

The Struggle

Reactivity

Reactivity

let internalValue = data.name;
const dep = new Dep();

Object.defineProperty(data, 'name', {
  get() {
    // name is accessed.
    dep.depend();
    return internalValue;
  },

  set(newVal) {
    // name is updated.
    internalValue = newVal;
    dep.notify();
  }
});

export default {
  data() {
    name: "Vue Hyderabad"
  },
  computed: {
    message() {
      return `Hello! ${this.name}`;
    }
  }
}

👎 Reactivity caveats

Cannot detect changes to array items or object property value changes

Cannot declare reactive properties later...sort of!

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive
// Array item update via [index] notation
vm.items[indexOfItem] = newValue

// Add or remove a property in an object
delete vm.user.firstName
vm.user.age = 28

😕 Half baked solutions

Cannot detect changes to array items or object property value changes

Cannot declare reactive properties later...sort of!

// Can't add to root level anymore
// But we can in nested object.
Vue.set(vm.someObject, 'b', 2)
Vue.set(vm.items, indexOfItem, newValue)

Go Immutable

Code organization

const vm = new Vue({
  props: {...},
  data() {...},
  methods: {...},
  computed: {...},
  filters: {...},
  watch: {...},
  created() {...},
  mounted() {...},
  ...,
  ...
})

Code 😳r...MESS

const vm = new Vue({
  props: {

  },
  data() {

  },
  methods: {

  },
  computed: {

  },
  filters: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  }
})

TypeScript

  • Large projects and teams
     
  • Make the most out of GraphQL Stack
     
  • Better tooling, IDE support
     
  • All the benefits of a Type System.

TypeScript IN VUE

  • Vue was never built using TypeScript or for it.
     
  • A lot of magic happens on `this`, the Vue instance.
     
  • Large objects aren't really that type friendly, such as the Options API
     
  • Makes it hard to work with Plugins, Third Party components / tools.

👎 Half baked solutions

import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class AwesomeComponent extends Vue {
  @Prop({
    type: Boolean
  })
  isStupid!: boolean;

  dataProperty = 'This is reactive';
  anotherDataProperty = 'This is reactive too';

  get computedValue() {...}
  
  created() {...}
}
The Relief

It's Not GOING To BE LIKE ANGULAR

New apis are purely opt-in

REACTIVITY 

USING PROXIES

const target = {};

const targetProxy = new Proxy(target, {
  get: function(theTarget, prop) {
    return prop === 'age' ? 
      `Your age is ${theTarget[prop]} years` 
      : theTarget[prop];
  }
});

target.age = 20

target.age // 20
targetProxy.age // Your age is 20 years
  • Double the speed, immediately
     
  • Half the memory footprint
     
  • No need of Vue.set or patching Array.prototype.push / pop
     
  • You get the benefits for free

REACTIVITY 

USING PROXIES

vueschool.io

API

COMPOSITION

  • All the time people had spent learning Vue had been wasted given everything was about to change.
     
  • The Vue Core team had suddenly implemented a huge breaking change without any consultation.
     
  • Vue is turning into React!
     
  • No, Vue is turning into AngularJS/Angular!
     
  • All HTML now needs to be written as a giant string!
  • Completely Opt-in
     
  • You don't need to rewrite your entire codebase
     
  • The entire changes went through an RFC process

API

COMPOSITION

import { reactive } from 'vue'

const state = reactive({
  count: 0
})
import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

watch(() => {
  document.body.innerHTML = `count is ${state.count}`
})
new Vue({
  data() {
    return {
      count: 0
    }
  }
})
import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

function increment() {
  state.count++
}

const renderContext = {
  state,
  increment
}

watch(() => {
  // hypothetical internal code, NOT actual API
  renderTemplate(
    `<button @click="increment">{{ state.count }}</button>`,
    renderContext
  )
})

API

COMPOSITION

import { reactive, computed } from 'vue'

const state = reactive({
  count: 0
})

const double = computed(() => state.count * 2)

// Access computed
console.log(double.value)
<!-- Automatic Ref Unwrapping -->
{{ double }}

API

COMPOSITION

<template>
  <button @click="increment">
    Count is: {{ state.count }}, 
    double is: {{ state.double }}
  </button>
</template>
<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

API

COMPOSITION

<script>
import { reactive, computed } from 'vue';
import { useCounter } from '@/utils';

export default {
  setup() {
    const {state, increment} = useCounter();

    return {
      state,
      increment
    }
  }
}
</script>

WHY DO ALL THIS?

API

COMPOSITION

Extracting logic and much better composition & reuse.

useSearch()
useSort()
usePagination()
useIntersectionObserver()
useLocalStorage()

...

vue-use-web

https://www.npmjs.com/package/vue-use-web

API

COMPOSITION

  • Be able to use Vue's reactivity system without a Vue instance
     
  • Much wider application area
     
  • Tree-shaken internals for smaller builds
     
  • Much improved TS support because of internals being mere functions
     
  • Plugins without polluting global Vue object.

API

COMPOSITION

VDom rewrite

<div>
  <p>This is static</p>
  <p>This is static as well</p>
  <p>This is {{dynamicVariable}}</p>
  <p>This is static after dynamic</p>
</div>

Before

Re-render everything, even the static parts.

After

Only re-renders the paragraph at line 4. Static parts get hoisted and never trigger changes

VDom rewrite

Monomorphic VNode Creation

function add(a: any, b: any) {
  return a + b;
}

add(1, 2) // 3
add('a', 'b') // ab
function add(a: number, b: number) {
  return a + b;
}
function concat(a: string, b: string) {
  return a + b;
}

add(1, 2) // 3
concat('a', 'b') // ab

Multiple root nodes

<template>
  <li v-for="item of items" :key="item.id">
    <icon :name="item.icon"></icon>{{item.title}}
  </li>
</template>
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Vue 2

Vue 3

  • v-if
  • v-for
  • multiple nodes
  • works for any component

https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/h.ts

SIMPLER custom inputs

<BaseInput
  placeholder="John Doe"
  label="First Name"
  v-model="firstName"
  @input="handleFirstName"
/>
<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-on="$listeners"
      @input="$emit('input', $event.target.value)"
    />
  </label>
</template>
<script>
export default {
  props: ["label"],
  inheritAttrs: false
};
</script>

SIMPLER custom inputs

<BaseInput
  placeholder="John Doe"
  label="First Name"
  v-model="firstName"
  @input="handleFirstName"
/>
<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  props: ["label"]
};
</script>

Everything is $attrs

  • Events : v-on:input => on-input
     
  • v-model : value / on-update:value
     
  • Multiple v-model : v-model:startDate, v-model:endDate
<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
/>
<DatePicker
  v-model:startDate="startDate"
  v-model:endDate="endDate"
/>

And there's More

  • In Built Portals
     
  • All slots are scoped slots & compiled as functions
     
  • New custom directives API
     
  • Suspense
     
  • Improved native support
     
  • Thorough migration guide

READ ON

Praveen Puglia

@praveenpuglia

praveenpuglia.com

@vuehyd

hyd.vue.community

Superfast Introduction to Vue 3

By Praveen Puglia

Made with Slides.com

Superfast Introduction to Vue 3

  • 1,320

More from Praveen Puglia