Vue.js 3
New features & more
Vue.js 3
- Smaller 🐜 & faster 🏃♀️
- New Features ⭐️
- Exposes lower level APIs 🧱
- Improves Typescript support 📐
- More maintainable codebase 🏛
- Beta Version (Here)
Vue.js 3
No Reactivity Caveats
- Setting a new array item
- Adding a new object property
- Deleting an object property
Vue.js 3
No Reactivity Caveats
// Vue 2
Vue.set(this.characters, index, otherItem)
// Vue 3
this.characters[index] = otherItem
Setting a new array item
Vue.js 3
No Reactivity Caveats
// Vue 2
Vue.set(this.character, 'newProperty', propertyValue)
// Vue 3
this.character.newProperty = propertyValue
Adding a new property object
Vue.js 3
No Reactivity Caveats
Deleting an object property
// Vue 2
Vue.delete(this.character, 'propertyName')
// Vue 3
delete this.character.propertyName
Vue.js 3
Portals
- Modals, notifications, Popups
- Layouts, sidebars, menu, footer
Vue.js 3
Portal - Target
<template>
<div>
<router-view>
<div id="portal-target"></div>
</div>
</template>Vue.js 3
Portal - Source
<template>
<div class="user-card">
<h2>{{ user.name }}</h2>
<button @click="delete">Remove user</button>
<Portal target="#portal-target">
<div>This will be rendered inside target!</div>
</Portal>
</div>
</template>Vue.js 3
Portal - Target + Source
<template>
<div class="user-card">
<h2>{{ user.name }}</h2>
<button @click="delete">Remove user</button>
<Portal target="#portal-target">
<div>This will be rendered inside target!</div>
</Portal>
</div>
</template><template>
<div>
<router-view>
<div id="portal-target"></div>
</div>
</template>Vue.js 3
Multiple Root Nodes
<template>
<div>
<div>...</div>
<div>...</div>
</div>
</template><template>
<div>...</div>
<div>...</div>
</template>It works ✅
No need 💁♂️
Vue.js 3
v-model API Change
<InviteeForm
v-model:name="inviteeName"
v-model:email="inviteeEmail"
v-model:location="inviteeLocation"
v-model:date="eventDate"
v-model:confirmation="confirmation"
/>It lets you define multiple v-model
.sync & and v-model could be merged in Vue 3
Vue.js 3
Suspense
<Suspense>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>Vue.js 3
Composition API
It won't depricate the options API
It's an addition for providing a more advance way to define components
A better way to reuse code among mixins, mixin factories and spots (There’s no perfect way to reuse logic between components)
To solve troubles when a component becomes too large
Vue.js 3
Composition API
Vue.js 3
Composition API
Vue.js 3
Composition API
Setup Method
<template>
<div>Capacity: {{ capacity }}</div>
</template>
<script>
export default {
setup() {
// more code to write
}
};
</script>Vue.js 3
Composition API
Setup Method
The setup executes before any of the following options are evaluated:
- Components
- Props
- Data
- Methods
- Computed Properties
- Lifecycle methods
It doesn't have access to "this"
Vue.js 3
Composition API
Setup Method Parameters
import { watch } from "vue";
export default {
props: {
name: String
},
setup(props, context) {
watch(() => {
console.log(props.name);
});
context.attrs;
context.slots;
context.parent;
context.root;
context.emit;
}
};Vue.js 3
Composition API
Reactive References
<template>
<div>Capacity: {{ capacity }}</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const capacity = ref(3);
return { capacity };
}
};
</script>Vue.js 3
Composition API
Methods
<template>
<div>Capacity: {{ capacity }}</div>
<button @click="incrementCapacity()">Increment Capacity</button>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const capacity = ref(3);
const incrementCapacity = () => {
capacity.value++;
};
return { capacity, incrementCapacity };
}
};
</script>Vue.js 3
Composition API
Computed Properties
<template>
<div>Capacity: {{ capacity }}</div>
<button @click="incrementCapacity()">Increment Capacity</button>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const capacity = ref(3);
const incrementCapacity = () => {
capacity.value++;
};
return { capacity, incrementCapacity };
}
};
</script>Vue.js 3 - New Features
By José Gabriel González
