vue 3 setup javascript 语法模板

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";

const loading = ref(false);

const data = reactive({
  username: "admin",
});

// 计算属性
const compute = computed(() => {
  return null;
});

// 定义方法
const methodDefine = () => {};

// 监听单个
watch(data, (newData) => console.log(`data is ${newData}`));

// 监听多个
watch([data1, data2], ([newData1, newData2]) => {
  console.log(`data1 is ${newData1}`);
  console.log(`data2 is ${newData2}`);
});

onMounted(() => console.log("Component  mounted"));

onUnmounted(() => console.log("Component  unmounted"));
</script>

<template>
  <div></div>
</template>

<style scoped></style>