Upgrading to Vue.js 2.3

Joshua Bemenderfer

The brand-new Vue 2.3 release is all about server-side rendering. It’s no small update either. The entire SSR process has been significantly improved and revamped, extensive documentation has been added, and a few old patterns have been deprecated. (Though not without replacement.) You can look forward to an article covering the new SSR patterns in-depth in the coming weeks. For now we’ll just cover the changes that might affect your app and new additions to other parts of the library.

New Server-Side Rendering Guide

Evan You (尤雨溪) was attempting to update the SSR documentation and accidentally a comprehensive guide to server-side rendering with Vue 2.3. Talk about productivity!

This should be your go-to source of truth and guidance for everything Vue + SSR related.

New Features

Vue 2.3 doesn’t add much in the way of new features, mostly focused on improving SSR and minor tweaks. In fact, the most noteworthy thing is probably the reintroduction of the .sync modifier from Vue 1.

:prop.sync

The ability to have two-way binding of properties in Vue 1 via :prop.sync was much-loved feature that many missed in Vue 2. It was removed because it allowed unintentional mutation of parent properties and could lead to a huge mess in your codebase.

Well, with the release of Vue 2.3, it has been re-added with a slightly different mechanic. The .sync modifier now acts like a more explicit v-model. When used, :prop.sync=”binding” effectively expands into :prop=”binding” @update:prop=”value => binding = value” That means that if a child component wants to update a synced prop, it needs to explicitly emit the @update:propname event with the new value.

This should provide a fairly convenient replacement for v-model for non-input components while still maintaining proper parent-child separation.

Example Usage:

<my-component :prop.sync="binding"></my-component>

my-component definition:

<template>
  <p @click="updateProp"></p>
</template>

<script>
export default {
  props: {
    prop: String
  },

  methods: {
    updateProp() {
      this.$emit('update:prop', this.prop + ' Updated!')
    }
  }
}
</script>

New event modifier: passive

A seemingly minor, but incredibly welcome change in the latest Vue release is the addition of the .passive event modifier to v-on. This allows an event to be bound in such a way that it explicitly says that it won’t cancel the event. This translates to a significant performance improvement on mobile for certain events, such as wheel, touchstart, and touchmove.

We’ll be covering the passive event modifier in JavaScript in the next few days.

Example Usage:

<!-- my-component no longer has the ability to cancel the event. -->
<my-component @wheel.passive="handleEvent($event)"></my-component>

Array style-bindings

:style bindings now allow you to pass an array of values, generally intended for prefixed values. This is fairly specific and probably not needed if you’ve already got an auto-prefixer in your build chain, but it may be useful for some.

Example Usage:

<!-- From https://github.com/vuejs/vue/releases/tag/v2.3.0 -->
<div :style="{display: ["-webkit-box", "-ms-flexbox", "flex"]}">

Other

Other minor changes include:

  • Error Handlers now are more reliable and provide a stack trace containing the component tree.
  • Property validation now supports type: Symbol.
  • You can now use Vue.extend()‘ed components as mixins.
  • Functional components can now use inject like normal components. (Accessed by context.injections)
  • If no props option is provided to functional components, the properties will be auto-extracted to context.props.
  • v-on listeners for functional components will be aliased to context.listeners alongside the old context.data.on.
  • Async Component Factories can now return an object containing information about which loading and error components to display, and when.

Troubleshooting / Migration

  • The server-rendered=”true” property indicating a rendered SSR app is now called data-server-rendered to make it valid HTML. This shouldn’t affect you unless you’re relying on that property for something.
  • vue-ssr-webpack-plugin is now deprecated, it has been replaced by vue-server-renderer/server-plugin and vue-server-renderer/client-plugin.
  • If your async components stop working, make sure you’ve upgraded vue-router to version 2.4.0 or higher.

That concludes the changes for Vue 2.3. As the documentation for the new features is expanded, we’ll try to keep this post up-to-date. Enjoy!

✖ Clear

🕵 Search Results

🔎 Searching...