【Vue】计算属性和监听属性

系列文章目录

第四章 计算属性和监听属性

---

---

一、计算属性

一般情况下属性都是直接定义的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。比如以下：

<script setup>
import {ref, computed} from "vue";

let width = ref(0);
let height = ref(0);

let area = computed(() => {
    return width.value*height.value;
})
</script>

<template>
    <label for="length">长：</label>
    <input type="number" name="height" v-model="height">
    <label for="width">宽：</label>
    <input type="number" name="width" v-model="width">
    <label for="area">面积：</label>
    <input type="number" name="area" :value="area" readonly>
</template>

二、监听属性

属性监听功能允许我们实时追踪属性值的变化。一旦属性值发生改变，我们可以通过相关函数立即获取到新的值。根据定义属性的方法的不同，属性监听主要分为两种情况：一种是针对使用ref函数定义的属性，另一种是针对使用reactive函数定义的属性。

1. 监听使用ref函数定义的属性

对于使用ref函数定义的基本数据类型，则直接监听即可，示例代码如下：

<script setup>
import {ref, watch} from "vue";

let width = ref(0);
watch(width, (newValue, oldValue) => {
    console.log(newValue);
})
const onUpdateWidth = () => {
    width += 1;
}
</script>

<template>
<div>
    <p>宽度：{{ width }}</p>
    <button @click="onUpdateWidth">修改width</button>
</div>
</template>

而对于使用ref函数定义的对象类型，如果要监听整个对象的变化，则直接监听即可：

<script setup>
import {ref, watch} from "vue";

let person = ref({
    username: '张三',
    age: 18
})

const onUpdateUsername = () => {
    person.value.username += "1"
}

const onUpdateAge = () => {
    person.value.age += 1
}

// 监听某个子属性的变化，使用getter方法
watch(() => person.value.username, (newValue, oldValue) => {
    console.log("new username: ", newValue);
})

// 监听整个对象子属性的变化，开启深度监听
watch(person, (newValue, oldValue) => {
    console.log("new person: ", newValue);
}, {deep: true})
</script>

<template>
<div>
    <p>用户名：{{ person.username }}，年龄：{{ person.age }}</p>
    <button @click="onUpdateUsername">修改username</button>
    <button @click="onUpdateAge">修改age</button>
</div>
</template>

如果要监听属性下的子属性的变化，要么通过getter函数监听某个子属性，或者开启深度监听，监听所有子属性的变化：

<script setup>
import {ref, watch} from "vue";

let person = ref({
    username: '张三',
    age: 18
})

const onUpdateUsername = () => {
    person.value.username += "1"
}

const onUpdateAge = () => {
    person.value.age += 1
}

// 监听某个子属性的变化，使用getter方法
watch(() => person.value.username, (newValue, oldValue) => {
    console.log("new username: ", newValue);
})

// 监听整个对象子属性的变化，开启深度监听
watch(person, (newValue, oldValue) => {
    console.log("new person: ", newValue);
}, {deep: true})
</script>

<template>
<div>
    <p>用户名：{{ person.username }}，年龄：{{ person.age }}</p>
    <button @click="onUpdateUsername">修改username</button>
    <button @click="onUpdateAge">修改age</button>
</div>
</template>

2. 监听使用reactive函数定义的属性

对于使用reactive函数定义的属性，那么默认会开启深度监听，所以不管是监听一个子属性的变化，还是监听所有子属性的变化，都无需手动开启深度监听。示例代码如下：

<script setup>
import {ref, reactive, watch} from "vue";
let university = reactive({
    name: '清华大学', 
    year: 1911
})

const updateUniversityName = () => {
    university.name = '北京大学'
}

// 1. 监听一个子属性的变化
watch(() => univertisy.name, (newValue, oldValue) => {
	console.log('new name: ', newValue);
})

// 2. 监听所有子属性的变化
watch(university, (newValue, oldValue) => {
    console.log(newValue);
})
</script>

<template>
<div>
    <div>大学名称：{{ university.name }}</div>
    <button @click="updateUniversityName">更换大学名称</button>
</div>
</template>

---