基本オプションとライフサイクル

必ずComponentAPIを使用しますか?

前回の例のように、refアプリケーション컴포지션 APIが呼び出された様子.コードが簡単であれば、このように最適化しなければなりませんか?そうではありません.逆に,単純な場合にComponentAPIを用いて記述する場合,より多くのコードを用いる必要がある.勢力によって導かねばならない.
App.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ count }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  }
}
</script>

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ count }}
  </h1>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0)
    let message = ref('hello world!')

    return {
      count,
      message
    }
  }
}
</script>

Vue Composition API Life Cycle hook

setupは、beforeCreate, createdライフサイクルフック間で実行される時点であるため、明示的な定義(beforeCreate()がsetup()の前に呼び出される必要はなく、setup()の後に呼び出される()が作成される.すなわち、上記2つのhookで記述されたすべてのコードは、setup関数の内部で直接記述されなければならない.

ソース:vue公式ドキュメント

Vue vs Vue Composition API

必ずしもVUE ComponentAPIが必要ではありません!最適化の方法について説明します.
App. vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ dobleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    dobleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue) {
      console.log(newValue)
    }
  },
  created() {
    console.log(this.message)
  },
  mounted() {
    console.log(this.message) 
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = "good?"
    }
  }
}
</script>

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ dobleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }

    const message = ref('hello world!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function changeMessage() {
      message.value = 'good?'
    }
    // create life cycle과 동일
    console.log(message.value)
    
    onMounted(() => {
      console.log(count.value)
    }) 
    return {
      count,
      doubleCount,
      increase,
      message,
      changeMessage,
      reversedMessage
    }
  }
}
</script>