vue3 <script setup> setup 语法糖

在 vue3.2 中,我们只需在script标签中添加setup。就可以做到,组件只需引入不用注册,属性和方法也不用 return 才能于 template 中使用,

也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。

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

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

不使用<script setup>这么写:

import { reactive } from 'vue'

export default {
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })

    // 暴露 state 到模板
    return {
      state
    }
  }
}

 

posted @ 2023-03-01 17:17  seven&night  阅读(152)  评论(0编辑  收藏  举报