[go: up one dir, main page]
Scribd
Upload
162 views4 pages

Migration Guide Cheat Sheet

This document summarizes some of the key changes between Vue 2 and Vue 3, including: - App initialization has changed and now uses createApp instead of the Vue object. - Functional components are now defined as functions instead of objects. - Lifecycle hooks like beforeDestroy have been renamed (e.g. beforeUnmount). - Custom directives now use different hook function names. - There are changes to how v-for references work and transition class names. The document provides code examples to illustrate these changes and points readers to additional resources on the Vue Mastery blog to help with the migration.

Uploaded by

Nicholas Dominic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
162 views4 pages

Migration Guide Cheat Sheet

This document summarizes some of the key changes between Vue 2 and Vue 3, including: - App initialization has changed and now uses createApp instead of the Vue object. - Functional components are now defined as functions instead of objects. - Lifecycle hooks like beforeDestroy have been renamed (e.g. beforeUnmount). - Custom directives now use different hook function names. - There are changes to how v-for references work and transition class names. The document provides code examples to illustrate these changes and points readers to additional resources on the Vue Mastery blog to help with the migration.

Uploaded by

Nicholas Dominic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Vue Mastery

Named and Scoped Slot Functional Attribute


COMPILER_SFC_FUNCTIONAL

VUE 2
<template functional>
<h1>{{ text }}</h1>
<ItemList>
</template>
<template slot="heading" slot-scope="slotProps">
<h1>My Heading for {{ slotProps.items.length }} items</h1> <script> Need to remove
</template> export default { this attribute.
</ItemList> props: ['text']
}
VUE 3 </script>

<ItemList>
<template v-slot:heading="slotProps">
<h1>My Heading for {{ slotProps.items.length }} items</h1>
</template> Four learning paths to expand your Vue skills.
</ItemList> Find yours here vuemastery.com/courses

Precedence Between v-if and v-for Mounted Container


COMPILER_V_IF_V_FOR_PRECEDENCE GLOBAL_MOUNT_CONTAINER

VUE 2
This used to run first. <html lang>
<ul> <head>...</head>
<li v-for="num in nums" v-if="num < 10">{{ num }}</li> <body>
</ul> <noscript></noscript>
<div id="app" data-v-app>
VUE 3 <div id="app" data-v-7ba
Now, this runs first. ...
<ul> </div> Now the mounted container
<li v-for="num in nums" v-if="num < 10">{{ num }}</li> </div> will still be there, so you might
</ul> ... get two container elements in
the rendered HTML.
SOLUTION

Use computed property.


<ul> <template> key
<li v-for="num in numsLower10">{{ num }}</li> COMPILER_V_FOR_TEMPLATE_KEY_PLACEMENT
</ul>
<template v-for="num in nums" :key="num.id">
<div :key="num.id">{{ num }}</div>
v-if Keys </template>
COMPILER_V_IF_SAME_KEY Need to move it to <template>

<ul>
<li v-for="num in nums"> Transition Classes
<span v-if="num < 10" :key="myKey">{{ num }}</span> (This deprecation has no warnings in the migration build.)
<span v-else class="high" :key="myKey">{{ num }}</span>
VUE 2 VUE 3
</li>
</ul> Rename
.v-enter .v-enter-from
Now you can’t use the same key for branches in the same Rename
conditional, either remove them all or use different keys. .v-enter .v-enter-from

Looking for more information? We have a blog series that you can dive into now.
Visit vuemastery.com/blog/migration
Vue Mastery

App Initialization (main.js)


GLOBAL_MOUNT / GLOBAL_EXTEND / GLOBAL_PROTOTYPE / GLOBAL_OBSERVABLE / GLOBAL_PRIVATE_UTIL

VUE 2 VUE 3

import Vue from "vue" import { createApp } from 'vue' Import the function
import App from './App.vue' import App from './App.vue' instead of the object.
import router from './router' import router from './router'
import store from './store' import store from './store'

Need to remove all uses of


the Vue object from the code. const app = createApp(App) Create the app instance
with the new function.
Vue.use(store) app.use(store)
Vue.use(router) app.use(router)

Vue.component('my-heading', { app.component('my-heading', {
props: [ 'text' ], props: [ 'text' ],
template: '<h1>{{ text }}</h1>' template: '<h1>{{ text }}</h1>'
}) })
VUE 2 VUE 3

const app = new Vue(App) No dollar sign prefix. Global APIs Instance APIs

app.$mount("#app"); app.mount('#app') Vue.component app.component


Vue.use app.use
Vue.config app.config
Vue.directive app.directive
Functional Component Vue.mixin app.mixin
COMPONENT_FUNCTIONAL

VUE 2 VUE 3

export default { import { h } from 'vue'


functional: true,
props: ['text'], const Heading = (props) => {
render(h, { props }) { return h('h1', {}, props.text)
return h('h1', {}, props.text) }
} Need to use a function
} Heading.props = ['text'] to create a functional
component.
export default Heading

Async Component
COMPONENT_ASYNC
v-for References
V_FOR_REF
import { defineAsyncComponent } from 'vue'

const MyComponent = defineAsyncComponent({ <template>


loader: () => import('./MyComponent.vue'), <ul>
... <li v-for="item in items" :key="item.id" ref="myNodes">
}) ...
Import and use the new function. </li>
</ul> Now this way of getting the references
</template> won’t work anymore.

...
mounted () {
Our blog series will show you a workaround for this. console.log(this.$refs.myNodes)
Find it here vuemastery.com/blog/migration }
Workaround
Vue Mastery

Lifecycle Hooks
OPTIONS_BEFORE_DESTROY / OPTIONS_BEFORE_DESTROY

VUE 2 VUE 3

export default { export default {


name: 'MyComponent', Rename name: 'MyComponent',
beforeDestroy() { beforeUnmount() {
... ...
}, Rename },
destroyed() { unmounted() {
... ...
}, },
... ...
} }

Custom Directive Hooks


CUSTOM_DIR

VUE 2 VUE 3

Vue.directive('my-directive', { app.directive('my-directive', {
created() { created() {
... ...
}, Rename },
bind() { beforeMount() {
... ...
}, Rename },
inserted() { mounted() {
... ...
}, },
update() { Removed beforeUpdate() { NEW
...
}, Rename },
componentUpdated() { updated() {
... ...
}, },
beforeUnmount() { NEW
...
Rename },
unbind() { ... } unmounted() { ... }
}) })

Lifecycle Events v-model Prop and Event


INSTANCE_EVENT_HOOKS COMPONENT_V_MODEL

VUE 2 VUE 2 VUE 3


<template>
<MyComponent @hook:mounted="foo"> Prop:
Rename
</template> value modelValue
Rename
Event: Rename
VUE 3
input update:modelValue
<template>
<MyComponent @vnode-mounted="foo">
</template>
Vue Mastery

Keyboard Codes Reactive Property Setters


V_ON_KEYCODE_MODIFIER GLOBAL_SET / GLOBAL_DELETE / INSTANCE_SET / INSTANCE_SET

VUE 2 Can’t use keycode anymore.


Vue.set Removed
<input type="text" v-on:keyup.112="validateText" /> Vue.delete Removed
vm.$set Removed
vm.$delete Removed
VUE 3 Use the key name instead.
Workaround
<input type="text" v-on:keyup.enter="validateText" />

Child Component References


INSTANCE_CHILDREN
v-bind sync modifier
COMPILER_V_BIND_SYNC
vm.$children Removed
VUE 2 Can’t use sync anymore.
Workaround
<MyComponent v-bind:title.sync="myString" />
Event Emitter
INSTANCE_EVENT_EMITTER
VUE 3 Use v-model instead.

vm.$on Removed
<MyComponent v-model:title="myString" />
vm.$off Removed
vm.$once Removed
Workaround
Native Event
COMPILER_V_ON_NATIVE Listeners
Need to remove the native modifier. INSTANCE_LISTENERS

<SpecialButton v-on:click.native="foo" /> vm.$listeners Removed


Workaround

Workarounds for these can be found at


vuemastery.com/blog/migration

Filters
FILTERS

VUE 2 VUE 3

<template> <template>
<p>{{ num | roundDown }}</p> <p>{{ numRoundedDown }}</p>
</template> </template>
Filters won’t work anymore. Use computed properties instead.
... ...
filters: { computed: {
roundDown(value) { numRoundedDown() {
return Math.floor(value) return Math.floor(this.num)
} }
}, },

Ready to level up your Vue skills?


Visit VueMastery.com to explore our library of Vue courses.

You might also like