Vue3

Vue3

Vue3 将 Vue 2.0 的选项 API（options API）制作成一个个 hook （钩子）函数，如 watch、computed 等方法

setup 调用的时机是创建组件实例，然后初始化 props，紧接着就是调用 setup 函数。从生命周期钩子的角度来看，它会在 beforeCreate 钩子之前被调用，所以 setup 内是拿不到 this 上下文的。

通过 ref、reactive 方法包裹的变量，会被赋予响应式的能力，也就是说你改变他们的值，模板内也会响应展示改变后的值。

使用 script setup 后，父组件就拿不到子组件的内部方法了，defineExpose 的作用就得以体现，将想要往外抛出的方法作为参数放到 defineExpose 中即可。

Vue 3 内部将 ref 悄悄的转化为 reactive，当 ref 作为渲染上下文的属性返回（即在 setup() 返回的对象中）并在模板中使用时，它会自动解套，无需在模板内额外书写 .value。

template 模板在被解析的时候，Vue3 内部通过判断模板内的变量是否是 ref 类型。如果是，那就加上 .value，如果不是则为 reactive 创建的响应集代理数据。

watchEffect 会追踪响应式数据的变化，并且还会在第一次渲染的时候立即执行。

<router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link :to="...">	router.push(...)

路由参数传递有两种方式，一种是通过浏览器查询字符串的形式，另外一种是通过 params 形式传递

浏览器查询字符串 query

query: { id: 1 }

如果我们不想污染浏览器查询字符串，但又想通过路由传参，params 是最好的选择。

params 形式

params: { id: 1 } 

通过 params 穿插，跳转的属性要通过 name 来控制，否则是拿不到传递的变量的。

在导航守卫中添加路由删除路由

router.currentRoute拿到当前的路径参数

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。

Vue Router 提供了两个功能来查看现有的路由：

• router.hasRoute()：检查路由是否存在。
• router.getRoutes()：获取一个包含所有路由记录的数组。