第五周（10.14-10.20）学习笔记 24软工陈奕君
学习收获：正在学习Vue3，目前学到了路由
学习笔记：
vue3:
ref------->可以定义：基本类型数据和对象类型的响应式数据
reactive-->只能定义：对象类型的响应式数据
ref创建的变量必须使用.value
computed：
作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。
实现同样的功能，方法function没有缓存，模板调用几次，函数就执行几次；计算属性computed有缓存，模板调用多次，实际上只执行一次。
计算属性实际上是一个ref响应式对象，因此赋值时候需要加上.value
watch监视：
情况一：监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
情况二：监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
注意：
若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。
若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。
情况三：监视reactive定义的【对象类型】数据，且默认开启了深度监视，且深层监视无法关闭。
无法监视地址值，因为对象地址值没有改变，本质上assign在原对象上进行的是赋值。
newValue和oldValue值相同，都是新值，还是因为对象地址值没有改变，本质上assign在原对象上进行的是赋值。
情况四：监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
若该属性值不是【对象类型】即【基本类型】，需要写成函数形式，此时oldValue是旧值，newValue是新值。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式。
注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
监视多个数据需要加[]包裹，并且都用函数形式
watchEffect：
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
watch对比watchEffect：
1、都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2、watch：要明确指出监视的数据
3、watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
标签的ref属性：
作用：用于注册模板引用。
1.用在普通DOM标签上，获取的是DOM节点。
2.用在组件标签上，获取的是组件实例对象。
props的使用：
// 第一种写法：仅接收
// const props = defineProps(['list'])
// 第二种写法：接收 + 限制类型
// defineProps<{list:Persons}>()
// 第三种写法：接收 + 限制类型 + 指定默认值 + 限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
Props 向下，事件向上：
数据通过 props 向下流动（父 → 子）
交互通过事件 向上传递（子 → 父）
【生命周期】
概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子
规律：生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
Vue2的生命周期
创建阶段：beforeCreate、created
挂载阶段：beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
Vue3的生命周期
创建阶段：setup
挂载阶段：onBeforeMount、onMounted
更新阶段：onBeforeUpdate、onUpdated
卸载阶段：onBeforeUnmount、onUnmounted
常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
自定义hook:
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。
路由：
1. 什么是路由？
路由就是根据不同的 URL 地址，展示不同的内容或页面。
2. 路由的基本使用
安装和配置：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', redirect: '/home' }, // 重定向
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/about', component: About }
]
})
export default router//一定要记得暴露路由器
在 main.js 中使用:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 使用路由器
app.mount('#app')
3. 核心组件
RouterLink - 导航链接
<template>
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
</template>
to：指定跳转的路由路径
active-class：激活状态时的 CSS 类名
RouterView-视图容器:用于显示当前路由对应的组件内容
路由器工作模式:
1.history模式
优点：URL更加美观，不带有#，更接近传统的网站URL。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。
各版本：
vue2——mode:'history'
vue3——history:createWebHistory()
React——BrowserRouter
2.hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：URL带有#不太美观，且在SEO优化方面相对较差。
to的两种写法:
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>