Vue 3 框架的使用

<template>
  <div>
    {{ title }}
    <div>{{  name }}</div>
    <button @click="clickFn">xxx 按钮</button>
  </div>
</template>
<script setup lang="ts" name="name">
// 通过导入 hooks 函数使用
import { onMounted, ref, nextTick, onUnmounted, computed } from 'vue'
// router 的使用
import { useRouter, useRoute } from "vue-router";
/*
  setup 不需要向原来一样做  default export 做默认导出
*/
// 直接声明，template即可使用
const clickFn = () => {
  // $route.query
  $router.push({
    path: "/home",
    query: {
      id: item.id,
    },
  });
}
// 直接声明，template即可使用
const title = "666";
// 声明过以后，template 直接使用接口，但是在 script 中 要加value
let name = ref('姓名') 

// props 的用法
const props = defineProps({
  titleA: String,
  type: {
    type: String,
    default: 'default' // 如果 type = "fusion" 电话会议里使用
  },
  isRadio: {
    type: Boolean,
    default: false
  },
  showIsOnline: Boolean,
  SourceData: [Array],
})


console.log(props.titleA)

const $router = useRouter();
const $route = useRoute();

// 计算属性的使用
const valueStr = computed(() => { // computed
  return `===${props.value}===` 
});

// 生命周期的使用 
onMounted(() => {
  nextTick(() => {
    name.value = "林晨晖"
    console.log("nextTick")
  });
})
</script>