Vue 3.x Composition API All In One

Vue 3.x Composition API All In One

SFC

Single-File Components / 单文件组件

1. Vue 3 Composition API 使用 <script setup> 自动 expose 🚀

<script setup 🚀>
// import {createApp, ref, reactive} from "vue"
import { ref } from 'vue'

// data
const count = ref(0)
// methods
function increment() {
  // .value is needed in JavaScript
  count.value++
}
</script>

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


<!--

Vue 3 Composition API 使用 <script setup> 自动 expose 🚀

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#script-setup

https://vuejs.org/guide/scaling-up/sfc.html

-->

2. Vue 3 Composition API 使用 `setup()`` 需要手动 expose 💩

<script>
// import {createApp, ref, reactive} from "vue"
import { ref } from 'vue'

export default {
  // `setup` is a special hook dedicated for the Composition API.
  setup() {
    const count = ref(0)
    function increment() {
      // .value is needed in JavaScript
      count.value++
    }
    // expose the ref to the template
    // don't forget to expose the function as well.
    // 手动 expose 💩
    return {
      count,
      increment
    }
  }
}

</script>

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

<!--

Vue 3 Composition API 使用 setup() 需要手动 expose 💩

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref

https://codepen.io/xgqfrms/pen/KKbzLGM?editors=1111

-->

https://vuejs.org/guide/scaling-up/sfc.html

https://vuejs.org/api/sfc-spec.html

Vue SFC Playground

https://play.vuejs.org/

https://play.vuejs.org/#eNp9kr1O7DAQhV9l5AYQq82V6NByxY8ooAAElG6MM7sYknFkj8NKUSSeg4ZX5BEYO+xCgWiieM7nmXNsD+qk6+Z9QnWoFtEG1zFE5NTBx/vb639NVQWu7XxgGGxAwyj8DAIu88dYdj2OsAy+Ba2kjVaaNnym4EvcEW1HU+lXGzaarKfIYH0ihqOM7v7bK3KL/OjrqGmZSPp7AkcyukXi3T0YNAEINe9NkxBcBEKssRYILk1v7kqGDJXWE7a/r2nUtKimhBJLFoxt10ggWQEsHhKzjDq2jbPPR1ptZ2pVAIBh+HI7SivZUU1bRF1U215qpjhKtKVbzZ+iJznW4lgr69vONRiuu5wpanU4ZcmaaRr/cllqHBLONnX7iPb5l/pTXOeaVjcBI4Zejn2rsQkrFNdZPr+7wrX8b8XW16kR+g/xFqNvUvY4YaeJarH9gytuL8olO1rdx/M1I8VNqGw0k2Phy6M4+yP6t92D+UHZJ1elxk+TZ+CX

demos

cdn

Composition API

official en-US docs ✅

https://vuejs.org/api/composition-api-setup.html

https://vuejs.org/guide/extras/composition-api-faq.html

official zh-Hans docs ✅

https://staging-cn.vuejs.org/

https://staging-cn.vuejs.org/api/composition-api-setup.html

https://staging-cn.vuejs.org/guide/extras/composition-api-faq.html

shit unofficial zh-Hans docs 💩

https://v3.cn.vuejs.org/api/composition-api.html#setup

https://v3.cn.vuejs.org/guide/composition-api-introduction.html#什么是组合式-api

refs

https://v3.vuejs.org/guide/composition-api-introduction.html

https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

https://github.com/xgqfrms/Vue-3.x/issues/6#issuecomment-1700355372

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---