计算属性
计算属性使用computed设置箭头函数
可以设置对象set(需要接收传入参数)和get函数进行修改computed的值
若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。
//计算属性
const publishedBooksMessage = computed(() => { return author.books.length > 0 ? 'Yes' : 'No' })
//函数
function calculateBooksMessage() { return author.books.length > 0 ? 'Yes' : 'No' }
watch和watchEffect
监视的本质是为了满足某一个值的时候触发一些条件，类似于触发器
watch进行数据监视
watch里面传参数第一个是监视值，后面的输出参数为新的值和旧的值
这个函数执行时即把他定义为一个函数时默认取消这个监视
- ref直接进行监视
- 需要监视对象数据时使用{deep:true}
- reactive监视数据时默认开启深度监视
- 监视的对象里面的参数不是ref对象，需要使用箭头函数回调(watch不监视常规数据)
- 监视函数对象里面的数据时需要开启deep深度监视
- 监视多个数据使用[]括起来箭头函数即可
watchEffect
- 内部用到哪些参数就进行监视哪些数据
标签的ref属性
- 普通DOM节点上获取节点值(相当于document.getElementById('title1'))
- 组件中使用获得的是defineExpose暴露的值
- {}进行
使用defineProps接收父组件传值
- 首先需要在父组件中使用v-bind进行传值
- 子组件可以使用泛型限制接受值的类型进行接收
- defineProps<{list:Persons}>()
- 子组件也可以添加withDefaults传入默认值(需要定义一个数据进行接收)
hook将内容放在一起
- 将所有内容用export default function包裹
- 最后需要将需要传递出去的值用return传递
keep-alive缓存组件
默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。
在切换时创建新的组件实例通常是有意义的，如果我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来：
<KeepAlive> <component :is="activeComponent" /> </KeepAlive>
<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>
它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。
tip:在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。
缓存存在的一些生命周期
当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。
一个持续存在的组件可以通过 onActivated()和 onDeactivated() 注册相应的两个状态的生命周期钩子：
<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => { // 调用时机为首次挂载 // 以及每次从缓存中被重新插入时 })
onDeactivated(() => { // 在从 DOM 上移除、进入缓存 // 以及组件卸载时调用 })
</script>
