Vue3 script-setup体验

说明：写法上干净了许多，定义方式也更加随意。

<script setup>
    import { ref } from 'vue'
    import { onMounted } from 'vue'
    const color = ref('red')
    const msg = 'hello step'

    const props = defineProps({
      foo: String
    })
    // 方法定义
    const getName = ()=>{
      console.log(4)
    }
    // 生命周期
    onMounted((e)=>{
      getName()
    })
</script>

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

<style scoped>
    button {
      color: v-bind(color);
    }
</style>