这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战
watch使用场景
比如根据值的变化，进行网络请求，根据值的变化进行组件的生成和销毁（我们经常成为这类操作为副作用）。把这类需求写在watch监听器里就是不错的选择。
可以通过修改title 但是这样写不好 所有的副作用写在watch中
document.title = overText.value
watch监听多个值
当你要监听多个值的时候，不是写多个watch函数，而是要传入数组的形式。比如现在我们同时要监听data中你选择了那个讨论组，也就是selectForum时，我们可以使用数组的形式。 发现报错了
看到上面的报错信息，告诉我们可以用一个函数解决reactive中的值的问题。把程序写成这个下面的样子就不报错了。
watch([overText,() => data.selectForum],(newValue,oldValue) => {
console.log(`new-------->${newValue}`);
console.log(`old-------->${oldValue}`);
document.title = newValue[0]
})
有人会说？Vue3不能监听reactive里边的值是不是一个Bug，我想说的这并不是Bug，而是为了保持和Vue2的一致性，因为在Vue2中也有这种结果，解决方案是要么是ref或者这种get/set方法的形式。要么你你开启设置watchOptions的deep为true，也就是深度监听模式~
模块化
import {ref} from 'vue'
import axios from 'axios'
function userUrlAxios(url: string){
const result = ref(null)
const loading = ref(true)
const loaded = ref(false)
const error = ref(null)
axios.get(url).then((res) =>{
loading.value = false
loaded.value = true
result.value = res.data
}).catch(e =>{
error.value = e
loading.value = false
})
return {result, loading, loaded, error }
}
export default userUrlAxios
App.vue页面
<template>
<div>
<h2>欢迎访问掘金开发者社区</h2>
<div>随机选择一个讨论组加入</div>
<div v-if="loading">loading.......</div>
<img v-if="loaded" :src="result.message" alt="">
</div>
</template>
<script lang="ts">
import userUrlAxios from './hooks/useUrlAxios'
export default{
name: 'App',
setup() {
const { result, loading, loaded} = userUrlAxios("<https://dog.ceo/api/breeds/image/random>")
return { result, loading, loaded }
}
}
前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧
欢迎留言讨论~
