vue3单文件语法糖

语法糖: 语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会

1, 在语法糖中使用组件传值
  import { defineProps, defineEmits, ref } from "vue"

  // 使用defineProps自定义属性,接收父组件传值, 新版本无需导入,直接用
  const props = defineProps(['msg'])
  console.log(props, props.msg)

  const info = ref("")
  // 使用defineEmits自定义事件, 向父组件传值
  const emit = defineEmits(["getinfo"])
  function change(){
    emit("getinfo", info.value)
  }

2, 在语法糖中使用路由和状态管理
  // 从路由模块中导入路由组合式API函数, 调用函数即可获取路由数据
  import { useRoute, useRouter } from "vue-router"
  const route = useRoute()
  const router = useRouter()
  console.log(route, router)

  // 从vuex模板中导入状态仓库组合式API(hook)函数, 调用即可获取状态仓库
  import { useStore } from "vuex"
  const store = useStore()
  console.log(store, store.state.address)
  // store.state.commit("setAddress", "")

3, 在vue3中绑定动态样式
  b{
    text-decoration: underline;
    font-size: v-bind(mySize1);
    color: v-bind(myColor);
  }

4, 在setup/语法糖中使用组件路由守卫
  // 从vue-router模块中导入路由守卫
  import {onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router"
  //在setup/语法糖中调用路由守卫
  onBeforeRouteUpdate((to, from, next)=>{
    console.log('路由进更新前');
    next()
  })
  onBeforeRouteLeave((to, from, next)=>{
    console.log('路由离开前');
    next()
  })
  注意: vue-router4.0 废除了组件内的守卫BeforeRouteEnter, 另外两个守卫BeforeRouteUpdate, BeforeRouteLeave 正常

5, 在路由出口添加keep-alive
 <!-- vue2中keepAlive写法 -->
  <keep-alive>
    <router-view />
  </keep-alive>
  <!-- vue3中keepAlive写法 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

6, 切换路由模式
  默认的历史模式
  history: createWebHistory(process.env.BASE_URL),
  切换哈希模式
  history: createWebHashHistory(process.env.BASE_URL),