持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情juejin.cn/post/714765…
shallowRef()
作用：创建浅层的ref数据，值是基本数据类型那么就是响应式。如果是复合类型，就不是响应式，监听不到值的变化。
triggerRef()
- 强制的把浅层ref值变成深层的，改变浅层ref，原来的ref可以监听到它内部的变化。
- 注意：如果shallowRef里的值是基本类型，是可以监听到数据的变化，如果不是基本类型，直接就监听不到数据变化，这时候就可以使用triggeRef（）方法。
<template>
<div>{{person.name}}
<button @click="changName">按钮</button>
</div>
</template>
<script setup>
import {shallowRef,triggerRef} from "vue"
let person=shallowRef({
name:'tom'
})
function changName(){
triggerRef(person) //加上这一行就可以监听到它，而且他们必须放在统一作用域中
person.value.name='你好'//只有这一行监听不到name得便阿虎
}
</script>
shallowReactive()
作用：创建一个浅层的响应式对象。
toRaw（）
根据一个 Vue 创建的代理返回其原始对象。
markRaw()
相当于给数据添加了标识，它不能变为（转换）为响应式对象了。例如const foo = markRaw()，即使使用reactive(foo)转换不会报错，但不是响应式的。所以谨慎使用该方法
router4路由 安装：cnpm i vue-router -D;//这种安装都是最新版本的
响应路由参数的变化
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
动态返回重定向目标
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
- 平时我们都是直接设置重定向redirect:'/login'，值为一个字符串，上面是设置为函数了，接收的参数to就是即将进入的路由组件，return的对象，就是具体的路由配置，后者return '/login'。和上面效果是一样的
- 请注意，导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在上面的例子中，在
/home路由中添加beforeEnter守卫不会有任何效果。
vue-router4
- 在路由守卫里,导航守卫函数的三个参数to，from，next，其中的next成为了可选参数，可直接在函数里执行相对应的逻辑，符合条件就return 为一个对象或字符串，即匹配到对应的路由，当然next（）方法也是依然支持的。
使用路由对象，需要在vue-router中引入userRoute和useRouter方法
const route=useRoute()
const router=useRouter()
route.query
router.push()
但是在模板中依然可以通过$route或$router访问相关信息
可以通过watch监听路由的某个值变化，尽量避免监听整个路由对象 useLink
