Vue 3.2 Overview | 點燈坊

Vue 3.2 is the most essential upgrade since Vue 3, <script setup> is not experimental anymore.

Version

Vue 3.2

Vite

$ yarn create vite vue32-lab --template vue
$ npm create vite@latest vue32-lab -- --template vue

Use vite to create a new Vue project.

Extra double-dash is needed for npm 7+

Script Setup

Use the classical counter to review the changes of Vue 3.2.

main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

Disable global style.css for Vue project.

App.vue

<template>
  <button @click="onClick">+</button>
  {{ count }}
</template>

<script setup>
import { ref } from 'vue'

let count = ref(0)
let onClick = () => count.value++
</script>

• Vue 3 uses ref() to create count Reactive Reference. We have to use .value to read and write count

Conclusion

• <script setup> is now supported for Vue

Reference

Evan You, Vue 3.2 Released!