vuUse | 不是第一

defineProps

defineProps 只能是要么使用运行时声明，要么使用typescript类型声明。同时使用两种声明方式会导致编译报错。；

<script lang='ts' setup>
const props = defineProps({
  child: {
    type:String, // 参数类型
    default: 1, //默认值
    required: true, //是否必传
    validator: value => {
      return value >= 0 // 除了验证是否符合type的类型，此处再判断该值结果是否符合验证
    }
  },
  sda: String, //undefined
  strData: String,
  arrFor: Array
})
</script>
// 子组件声明了的 props ，若父组件未传，则该值为 undefined

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收两个参数：
to: 即将要进入的目标用一种标准化的方式
from: 当前导航正要离开的路由用一种标准化的方式
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
一个路由地址: 通过一个路由地址重定向到一个不同的地址，如同调用 router.push()，且可以传入诸如 replace: true 或 name: 'home' 之类的选项。它会中断当前的导航，同时用相同的 from 创建一个新导航。

 router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

vue样式穿透 `::v-deep`的具体使用

深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得 '更深' ，例如影响子组件，你可以使用 >>> 操作符：

<style scoped> 
.a >>> .b { /* ... */ } </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作例如：

>>> 如果vue的style使用的是css，那么则

<style lang="css" scoped>
.a >>> .b { 
 /* ... */
}
</style>

但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

/deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。此时我们可以使用第三种方式

::v-deep

切记必须是双冒号

<style lang="scss" scoped>
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
</style>

使用场景: 当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器 style 为 css 时的写法如下

.a >>> .b {
 ***
}

style使用css的预处理器(less, sass, scss)的写法如下

// 第一种/deep/
/deep/ .a {
 ***
}

// 第二种::v-deep
::v-deep .a{
 ***
}

建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快

# defineProps

# 全局前置守卫

# vue样式穿透 ::v-deep的具体使用

defineProps

全局前置守卫

vue样式穿透 `::v-deep`的具体使用