From Vue 0.x to Vue 3: Evolution, New Features, and Migration Guide

Historical Overview

Vue 0.6.0 was released on 2013‑12‑08 as a solo project. Vue 1.0 appeared on 2015‑10‑27, reaching 382,184 npm downloads, while React and AngularJS dominated the market. Vue 2.0 launched on 2016‑10‑01, quickly gaining community traction and achieving 1,943,567 downloads, placing Vue among the top three front‑end frameworks.

In 2017‑2018 Vue 2.x grew rapidly. The creator, Evan You, cited React Hook's Function‑based API as inspiration for Vue 3.0, aiming for a Q4‑2019 release. By April 2020 the latest stable version was 2.6.11 (released 2019‑10‑16), while Vue‑next (Vue 3.0) progressed through several alphas and betas.

Debate and Compatibility

Vue’s open‑source nature means the core team decides the roadmap, but major changes can spark community controversy. In June 2019 an RFC proposed a Function‑based API for Vue 3.0, triggering heated discussions about refactoring, perceived waste of effort, and concerns over lack of community consultation.

Critics warned of “rewriting everything” and likened the shift to “making Vue become React.” The team reassured that old syntax remains functional and can be supported via plugins if removed from the core.

Vue‑next Core Structure

Vue 3.0 reorganizes its source: the former src folder is split into packages containing modules such as vue (core entry), reactivity (proxy‑based reactivity), compiler‑xxx (template compilation), and runtime‑xxx (virtual DOM, component lifecycle, rendering). This modularization isolates concerns and reduces bundle size.

Reactive System: From Data Hijacking to Proxy

Vue 2.x used Object.defineProperty to intercept property access (data hijacking). Example:

var obj = {};
Object.defineProperty(obj, 'text', {
  get: function() { console.log('get', this.text); return 'nothing'; },
  set: function(val) { console.log('set', val); }
});
obj.text = 'test';
console.log(obj.text);

This approach struggled with array mutations and dynamic property addition, requiring methods like push, splice, or Vue.set. Vue 3.0 replaces hijacking with the native Proxy object, allowing transparent interception of any property change, including array index assignments.

Proxy objects let you define custom behavior for fundamental operations such as property lookup, assignment, enumeration, function invocation, etc.

const p = new Proxy(target, handler);
const obj = { a: 1 };
const handler = {
  get(t, prop) { return prop in t ? t[prop] : 'no_value'; },
  set(t, prop, value) { console.log(prop, value, t[prop]); t[prop] = value; }
};
const objProxy = new Proxy(obj, handler);
console.log(objProxy.b); // 'no_value'
objProxy.b = 2;

Composition API and New Syntax

Vue 3.0 introduces the Composition API, centered on the setup function, which runs before component creation and replaces beforeCreate and created. The function can return reactive state, methods, and computed values for template use.

<template>
  <div>{{ text }}</div>
</template>
<script>
export default {
  setup() {
    const text = 'hello vue3.0';
    return { text };
  }
}
</script>

Key concepts:

props : received as the first argument of setup.

context : second argument, exposing root, parent, refs, attrs, emit, etc.

Lifecycle hooks are renamed (e.g., beforeMount → onBeforeMount, mounted → onMounted, beforeDestroy → onBeforeUnmount).

Reactive primitives: ref creates a single reactive value accessed via .value in JavaScript but can be used directly in templates. reactive creates a reactive object where all properties are tracked. toRefs converts a reactive object’s properties into ref s, preserving reactivity when destructuring or spreading.

const mouse = reactive({ x: 0, y: 0 });
const mouseRef = toRefs(mouse);
let { x, y } = mouseRef; // x and y stay reactive

Other APIs such as computed and watch remain, with minor syntax adjustments.

import { computed } from 'vue';
export default {
  props: { mouse_x: Number },
  setup(props) {
    const mouse_x_val = computed(() => props.mouse_x + '_val');
    return { mouse_x_val };
  }
}

import { ref, watch } from 'vue';
export default {
  setup() {
    const mouse_x = ref(0);
    watch(() => mouse_x.value, () => { console.log(mouse_x.value); });
    return { mouse_x };
  }
}

Local Experimentation

Vue 2.x allowed direct <script src="..."></script> inclusion. Vue 3.0 still supports this after building the source from the vue-next repository.

git clone https://github.com/vuejs/vue-next.git
cd vue-next
yarn
yarn build

After building, include the compiled file:

<script src="../../vue-next/packages/vue/dist/vue.global.prod.js"></script>
<div id="container"></div>
<script src="./index.js"></script>

Example app using the Composition API:

function usePosition() {
  let state = Vue.reactive({ x: 0, y: 0 });
  function update(e) { state.x = e.pageX; state.y = e.pageY; }
  Vue.onMounted(() => window.addEventListener('mousemove', update));
  Vue.onUnmounted(() => window.removeEventListener('mousemove', update));
  return Vue.toRefs(state);
}
const App = {
  setup() {
    const state = Vue.reactive({ name: 'init-name' });
    const { x, y } = usePosition();
    function changeName() { state.name = 'vue3.0初探->'; }
    return { state, changeName, x, y };
  },
  template: `<button @click="changeName">{{state.name}} 鼠标x: {{x}} 鼠标y: {{y}}</button>`
};
Vue.createApp(App).mount('#container');

A webpack‑based starter template ( vue-next-webpack-preview) provides a familiar project layout with src/main.js and src/App.vue using the Composition API.

Final Notes

Vue 3.0 is still in beta; it is not recommended for production but suitable for personal projects or experimentation. Issues can be reported on the official GitHub repository.