Vue
路由的封装抽离
为了便于维护 ，我们通常需要将路由模块抽离出来
在vue中，如果要写路径，可以写绝对路径 使用@ @代表从src目录下去寻找，能避免出现很多错误
声明式导航 -- 导航链接
vue-router提供了一个全局组件router-link（取代a标签） 配置 to 属指定路径 本质是 a 标签，to 无需 #
优点：能高亮 默认会提供高亮样式 可以直接设置高亮样式
在页面中其实也就是 a 标签 多了类名，根据这个类名 可以自己设置
效果
router-link 自动给当前导航添加了俩个高亮类名
- router-link-exact-active 精确匹配 to="/my" 仅仅匹配 /my
- router-link-active 模糊匹配 to="/my" "/my/a" 写/my 可以匹配后接的/a /b
如果觉得太长，可以自定义这俩个类
然后就能对应上
声明式导航——跳转传参
查询参数传参
语法 to="/path?参数名=值“
对应页面组件接受传递过来的值 $route.query.参数名
动态路由传参
配置动态路由
const router=new VueRouter({
routes:[
{
path:'/search/:words',
component:search
}
]
})配置导航链接 to="/path/参数值"
对应页面组件接受过来的值 $oute.params.参数名
如果配置成 ”/search/:words“ 来表示 ，则必须要传递参数 ，如果不传递参数，也希望匹配，可以在后面加一个 可选符号 "?"
Vue路由——重定向
当我们想要访问当前路径，强制跳转到另外一个路径时 就可以使用该重定向
语法 { path:匹配路径，redirect:重定向后的路径 }
如果想要更人性化一点，客户访问的地址不存在，可以在最后写 path:"*" (匹配任意路径)，并且给出一个404的界面
由于我们的地址栏路径带有一个 # 号，显得十分的不美观
路由的路径模式有俩种
- hash路由（ 默认 ）带有#号
- history路由（ 常用 ）不带#号
path路径跳转
如果路径太长，为了省事 可以指定name
如果在传递参数时，需要传递多个参数，拼接地址栏可能很麻烦，可以直接按照对象去写，vue-route给我们提供了便利
学习vue3
学习vue的时候 学姐都说 直接学习vue3 就可以 开启vue3学习旅程
vue3 的优势
- 更容易维护——组合式API 由更好的TypeScript 支持
- 更快的速度——重写diff算法 模板编译优化 更高效的组件初始化
- 更小的体积——良好的TreeShaking 按需引入
- 更优的数据响应式 Proxy
create-vue
是vue官方新的脚手架工具 底层切换到了 vite （下一代构建工具）
前提 已经安装 16.0 或者更高版本的Node,js
创建 vue 应用 npm init vue@latest 这个指令会安装并且执行 create-vue
把上面绿色的按照顺序输入一遍
然后就是下面这样代表安装好了
打开网址 出现下面这个代表完成
在vue3中创建实例
直接写 createApp() vue3将创建实例进行了封装 保证每个实例的独立封闭性
vue3支持多个根元素
setup
执行时机 比beforeCreate 还要早
setup函数中 获取不到this
数据 和 函数 需要在setup 中 return 才能使用
setup的语法糖 给组合式API提供了便利
上面俩个是等价的
reactive()
接受 对象类型数据 的参数 传入 并且返回 一个响应式的对象
ref()
接收简单类型或者对象类型的数据 传入并且返回一个响应式的对象
本质上 是在原有传入数据的基础上 外包了一层对象 包成了复杂数据类型 再借助 reative 实现了响应式
在js代码中访问数据时 需要通过 .value
在模板 中不需要通过 .value
computed
和vue的写法是差不多的
watch函数
监听 一个或者 多个数据的变化 数据变化时执行 回调函数
俩个额外参数 immediate （立即执行） deep (深度监听)
通常我们不需要监视整个对象而是对象的某些属性
vue3的生命周期
上面是对应的vue2 和 vue3 的生命周期函数
vue3的组件通信
在vue3中 引用就可以使用 不用在component里面再次进行声明
父子组件
父传子之间的通信 利用 编译器宏 defineProps
defineProps原理 就是编译阶段的一个标识 实际编译器解析时 遇到后 会进行编译转换
效果：
子传父之间的通信
父组件 中给 子组件标签通过 @ 绑定事件
子组件内部通过emit方法触发事件
效果：
点击往下降 父组件和子组件都能改变
模板引用
通过 ref 标识 获取真实的dom对象或者组件实例对象
使用： 调用 ref 函数生成一个 ref 对象，通过 ref 标识绑定 ref 对象到标签
通过 ref 可以获取到组件的 数据 以及 方法 但是默认情况下 在 setup 下组件内部的属性和方法是不开放的，可以通过 defineExpose 编译宏 来指定 哪些属性和方法允许访问
需要注意的是获取模板引用的时机必须要是组件挂载完毕 —— onMounted()
provide 和 inject
主要作用于 顶层组件向任意底层组件 传递数据和方法 实现跨层组件通信
顶层组件通过 provide 提供数据 底层组件通过 inject 函数获取数据
提供的数据是响应式数据
倘若子孙组件想要修改 顶级组件 就在顶级组件提供方法 来给所有的子孙组件使用
