【Vue.js】Vue3.2でCompositionAPIで書いたコードがめっちゃ読みやすくなりそうじゃない?

blog.vuejs.org

Vue3.2がリリースされたらしい。内容がいい感じだった。

script setup

Compositon APIで書くとどうしても気になる構文の縦長さ。

<template>
  <button @click="addNum">Num:{{ num }} </div>
<template>
<script>
import { ref } from 'vue'
export default {
   setup () {
      const num = ref(10)
      const addNum = () => num.value++ 
      return { num, addNum } 
   }
}
</script>

これが

<template>
  <button @click="addNum">Num:{{ num }} </div>
<template>
<script setup>
import { ref } from 'vue'
const num = ref(10)
const addNum = () => num.value++
</script>

こうなる。超スリム。

Composition API書く時の最初のアレってどう書くんだっけ?って悩まなくてよくなりそう。
returnを書かなくてもよくなるので、バインディングが上手くいってないと思ったらreturnに書き忘れた!っていうのもなくなりそう。
気をつけないとなんでもかんでもtemplateで参照できちゃうので、そこだけ注意かも?なんか回答ありそう。

style v-bind

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

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color); // 👈 v-bindできる 神
}
</style>

もう見たまんま。styleでv-bindができる。神オブ神

こんなことしなくてよくなる

【Vue.js】VueCompilerに怒られずにtemplateにstyleタグを埋め込みたい - いいねのお勉強ノート

ためしたい

sfc.vuejs.org