Vue3 Script Setup速查表

<script setup>
function getParam(param) {
  return param;
}
</script>

<template>
  {{ getParam(1) }}
</template>

import { ref, reactive } from 'vue'
const enabled = ref(true)
const object = reactive({ variable: false })

import { defineAsyncComponent } from "vue";
import TheComponent from "./components/TheComponent.vue";
const AsyncComponent = defineAsyncComponent(() =>
  import("./components/AsyncComponent.vue")
);

import { watch, ref } from "vue";
const counter = ref(0);
watch(counter, () => {
  console.log("Counter value changed");
});

import { onMounted } from "vue";
console.log("Equivalent to created hook");
onMounted(() => {
  console.log("Mounted hook called");
});

const emit = defineEmits(["event-name"]);
function emitEvent() {
  emit("event-name");
}

defineProps({
  elements: Array,
  counter: {
    type: Number,
    default: 0,
  },
});