侦听器
用于侦听指定变量，当其响应式状态变化时触发回调函数。
watch()
watch() 需明确指定侦听的数据源，并且仅当数据源变化时，才会执行回调，在创建侦听器时，不会执行回调，可以获取到数据源变化前后的值。
- 第一个参数为“数据源”，可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
- 第二个参数为回调函数
侦听–响应式变量 / 计算属性
const x = ref(0)
watch(x, (newX) => {
console.log(`x is ${
newX}`)
})
侦听–响应式对象
会隐式地创建一个深层侦听器，对象的属性和嵌套属性发生变化时，都会触发回调
const obj = reactive({
count: 0 })
watch(obj, (newValue, oldValue) => {
// 此处 `newValue` 和 `oldValue` 是相等的，因为它们是同一个对象！
})
若用getter 函数返回响应式对象 ，则只有在返回不同的对象时，才会触发回调：
watch(
() => state.someObject,
() => {
// 仅当 state.someObject 被替换时触发
}
)
通过添加 deep 选项，可以将其强制转成深层侦听器（即当对象的属性和嵌套属性发生变化时触发回调）
watch(
() => state.someObject,
(newValue, oldValue) => {
// 此处 `newValue` 和 `oldValue` 是相等的，除非 state.someObject 被整个替换了
},
{
deep: true }
)
侦听–对象的属性
方案1：用一个返回该属性的 getter 函数
// 侦听obj对象的count属性
watch(
() => obj.count,
(count) => {
console.log(`count is: ${
count}`)
}
)
方案2：使用 toRefs
import {
ref, toRefs, watch } from "vue";
let obj = ref({
count: 30 });
let {
count } = toRefs(obj.value);
watch(count, (newValue, oldValue) => {
});
不能直接侦听响应式对象的属性值，因为属性值非响应式
const obj = reactive({
count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
console.log(`count is: ${
count}`)
})
侦听-- getter 函数
const x = ref(0)
const y = ref(0)
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${
sum}`)
}
)
侦听-- 多个数据源
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${
newX} and y is ${
newY}`)
})
watchEffect()
watchEffect()在创建侦听器时，会立即执行一遍回调，并从中自动分析出依赖的数据源（其响应性依赖关系不那么明确），当数据源发生改变时，再次触发回调。无法获取到数据源变化前的值。
watchEffect(async () => {
const response = await fetch(url.value)
data.value = await response.json()
})
上例中，在页面创建时会先请求 url.value 接口获得初始数据，并自动追踪 url.value
当 url.value 变化时，会再次执行回调，访问新的接口获取数据。
改变回调的触发时机
默认情况下，侦听器回调会在 Vue 组件更新之前被调用（在侦听器回调中访问的 DOM 是被 Vue 更新之前的状态）
添加 flush: 'post' 选项可以让侦听器回调在 Vue 组件更新之后再调用，这样就能在侦听器回调中访问被 Vue 更新之后的 DOM 啦！
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})
后置刷新的 watchEffect() 可以直接用 watchPostEffect()
import {
watchPostEffect } from 'vue'
watchPostEffect(() => {
/* 在 Vue 更新后执行 */
})
停止侦听器
同步语句创建的侦听器，会在组件卸载时自动停止。
异步回调创建的侦听器，必须手动停止它，以防内存泄漏。
setTimeout(() => {
watchEffect(() => {
})
}, 100)
手动停止侦听器的方法是调用 watch 或 watchEffect 返回的函数
const unwatch = watchEffect(() => {
})
unwatch()
异步创建侦听器的情况很少，如果需要等待一些异步数据，可以使用条件式的侦听逻辑：
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 数据加载后执行某些操作...
}
})
模板引用 ref
用于直接访问底层 DOM 元素，即 vue2 中的 $refs
<input ref="input" />
import {
ref, onMounted } from 'vue'
// 声明一个ref变量来存放该元素的引用，变量名必须和模板里的 ref 属性值相同
const input = ref(null)
onMounted(() => {
// 页面加载后，输入框自动获得焦点
input.value.focus()
})
只可以在组件挂载后才能访问模板引用
若侦听模板引用 ref 的变化，需考虑到其值为 null 的情况：
watchEffect(() => {
if (input.value) {
input.value.focus()
} else {
// 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
}
})
ref 绑定函数
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
- 绑定函数需使用
:ref - 每次Dom更新时函数都会被调用
- Dom被卸载时，函数也会被调用一次，此时 el 参数的值是 null
子组件上的 ref
若子组件使用的是选项式 API 或没有使用 <script setup> ，则对子组件的模板引用即子组件的 this，可以直接访问子组件的属性和方法。（但仍推荐用标准的 props 和 emit 接口来实现父子组件交互）
使用了 <script setup> 的子组件是默认私有的：父组件无法访问私有子组件中的任何东西，除非子组件通过 defineExpose 宏显式暴露。
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
父组件通过模板引用获取到的实例类型为 { a: number, b: number } (ref 都会自动解包，和一般的实例一样)。
父子组件
父组件中使用子组件 import
vue3 中导入后就能直接使用，无需像 vue2 中进行注册
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>
<template>
<ButtonCounter />
</template>
子组件接收父组件传入的数据 props
子组件用 defineProps() 接收父组件传入的数据
<script setup>
defineProps(['title'])
</script>
<template>
<h4>{
{ title }}</h4>
</template>
defineProps() 的参数和 props 选项的值相同
defineProps({
title: String,
likes: Number
})
搭配 TypeScript 使用类型标注来声明 props
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>
选项式风格中，props 对象会作为 setup() 函数的第一个参数被传入：
export default {
props: ['title'],
setup(props) {
console.log(props.title)
}
}
子组件触发自定义事件 emits
组件触发的事件不会冒泡，父组件只能监听直接子组件触发的事件。
父组件–在引入的子组件上绑定事件
<BlogPost @enlarge-text="postFontSize += 0.1"/>
子组件–用 defineEmits() 声明事件
<button @click="$emit('enlarge-text')">Enlarge text</button>
<script setup>
defineEmits(['enlarge-text']) // 多个事件则为 defineEmits(['inFocus', 'submit'])
</script>
选项式风格中，通过 emits 选项定义组件会抛出的事件，并用 setup() 的第二个参数（上下文对象）访问 emit 函数：
export default {
emits: ['enlarge-text'],
setup(props, ctx) {
ctx.emit('enlarge-text')
}
}
事件传参
子组件
<button @click="$emit('increaseBy', 1)"></button>
父组件
<MyButton @increase-by="(n) => count += n" />
或
<MyButton @increase-by="increaseCount" />
function increaseCount(n) {
count.value += n
}
子组件继承样式
vue2 中限定只能有一个根节点，父组件中给子组件添加的样式，都会渲染在子组件的根节点上，如：
<!-- 子组件 -->
<p class="child">你好</p>
<!-- 父组件使用子组件时，添加了新的样式 father -->
<MyComponent class="father" />
最终渲染的效果为：
<p class="child father">你好</p>
vue3 中支持多个根节点，所以需要通过 $attrs 指定具体哪些节点继承父组件添加的样式。
<!-- 子组件：在需要继承样式的元素上，添加 :class="$attrs.class" -->
<p :class="$attrs.class">你好</p>
<span>我是朝阳</span>
<!-- 父组件使用子组件时，添加了新的样式 father -->
<MyComponent class="father" />
最终渲染的效果为：
<p class="father">你好</p>
<span>我是朝阳</span>