Vue3菜鸟入门教程：计算属性和监听器的用法
computed计算属性
计算属性指的是将Vue3的响应式数据，经过某种算法计算以后返回的一个值，这个值可以直接用于模板渲染。比如，我们经常在网页中渲染金额，如果金额过大的化，会导致内容很长。比如10000000表示1000万，我们可以将这个金额转换为1000w来进行表示。在使用计算属性的过程中，需要注意，尽量不要在异步方法中使用计算属性，尽量不要修改计算属性的值。
示例：计算金额。
<script setup>
import {computed, ref} from "vue";
// 定义金额
const money = ref(1000000)
// 计算属性，将10000000计算为1000w
const moneyW = computed(() => {
return `${money.value / 10000}w`
})
</script>
<template>
<div>
<div>原始金额：{{ money }}</div>
<div>转换金额：{{ moneyW }}</div>
</div>
</template>
<style scoped></style>
watch监听器
watch监听器的作用是监听一个或者多个数据的变化，数据变化时执行回调函数。watch方法有两个额外参数，immediate表示立即执行，deep表示深度监听。
示例：监听单个值的变化。在这个案例中，我们定义了两个响应式变量msg和count，count可以通过两个按钮的点击分别增加和减少，msg的值会根据
<script setup>
import {ref, watch} from "vue";
const msg = ref("请点击按钮进行操作")
const count = ref(0)
const onAdd = () => {
count.value++
}
const onSub = () => {
count.value--
}
// 监听器，监听count的值
watch(count, (newValue, oldValue) => {
msg.value = `您点击了按钮，count的值从${oldValue}变成了${newValue}`
})
</script>
<template>
<div>
<div>{{ msg }}</div>
<div>{{ count }}</div>
<div>
<button @click="onAdd">+</button>
<button @click="onSub">-</button>
</div>
</div>
</template>
<style scoped></style>
示例：监听多个响应式对象的变化。在这个案例中，我们给出了x和y两个坐标变量，然后使用监听器监听这两个值的变化。只要其中有一个值发生变化，监听器的回调方法就会执行。
<script setup>
import {ref, watch} from "vue";
// 坐标
const x = ref(0)
const y = ref(0)
const msg = ref(`旧坐标：0,0 新坐标：0,0`)
// 监听器，监听count的值
watch([x, y], ([x, y], [ox, oy]) => {
msg.value = `旧坐标：${ox},${oy} 新坐标：${x},${y}`
})
</script>
<template>
<div>
<div>{{ msg }}</div>
<div>
<div>请输入x坐标：<input type="number" v-model="x"></div>
<div>请输入y坐标：<input type="number" v-model="y"></div>
</div>
</div>
</template>
<style scoped></style>
示例：immediate的用法。在这个案例中，我们演示了参数immediate的用法，这个参数用于立即执行监听，特别适合那种搜索的场景。当用户什么都没有输入的时候，我们立即执行一次监听，搜索所有数据。当用户输入内容以后，则再次根据监听到的新值，取搜索符合条件的数据。
<script setup>
import {ref, watch} from "vue";
// 搜索关键字
const search = ref("")
// 搜索结果
const searchResult = ref([])
// 模拟数据
const data = ["a", "b", "c"]
// 监听搜索关键字的变化
watch(search, (newValue, oldValue) => {
if (newValue === "") {
// 为空则全部数据
searchResult.value = data
} else {
// 否则取相等的数据
searchResult.value = data.filter((v, i, arr) => {
return arr[i] === newValue
})
}
}, {immediate: true})
</script>
<template>
<div>
<div>
<input type="text" v-model="search" placeholder="请输入...">
<select>
<option value="" v-for="(v,i) in searchResult" :key="i">{{ v }}</option>
</select>
</div>
</div>
</template>
<style scoped></style>
示例：deep参数的用法。在这个案例中，我们定义了一个员工对象，有id和name以及age三个属性，我们使用监听器deep深度监听器其属性的变化，任何一个属性变化，都会触发监听的回调。对于对象类型的数据，如果不加deep参数，会无法监听，也就是监听器不会生效。
<script setup>
import {reactive, ref, watch} from "vue";
const employee = reactive({
id: 1,
name: "张三",
age: 22,
})
const msg=ref(`员工【${employee.id},${employee.name},${employee.age}】`)
// 监听搜索关键字的变化
watch(employee, (newValue, oldValue) => {
msg.value=`员工【${newValue.id},${newValue.name},${newValue.age}】`
}, {deep: true})
</script>
<template>
<div>
<div>
<h1>{{msg}}</h1>
<form action="#">
<div>编号：<input type="text" v-model="employee.id"></div>
<div>姓名：<input type="text" v-model="employee.name"></div>
<div>年龄：<input type="text" v-model="employee.age"></div>
</form>
</div>
</div>
</template>
<style scoped></style>
示例：监听对象的某个具体属性。开启deep会耗费很大的性能，在实际开发中，尽量少应用。如果需要监听对象的属性，可以参考如下案例。
<script setup>
import {reactive, ref, watch} from "vue";
const employee = reactive({
id: 1,
name: "张三",
age: 22,
})
const msg = ref(`员工【${employee.id},${employee.name},${employee.age}】`)
// 监听搜索关键字的变化
watch(()=>employee.age, (newValue, oldValue) => {
msg.value = `员工【${employee.id},${employee.name},${newValue}】`
})
</script>
<template>
<div>
<div>
<h1>{{ msg }}</h1>
<form action="#">
<div>编号：<input type="text" v-model="employee.id"></div>
<div>姓名：<input type="text" v-model="employee.name"></div>
<div>年龄：<input type="text" v-model="employee.age"></div>
</form>
</div>
</div>
</template>
<style scoped></style>
