Vue3之计算属性和监视

代码

代码

<script setup>
import {reactive,watch,watchEffect,computed,ref} from "vue"

const person = reactive({
    firstName:"Sun",
    lastName:"WuKong"
})

// 计算属性 只有getter
const fullName1 = computed(() => `${person.firstName}-${person.lastName}`)
// 计算属性 getter setter
const fullName2 = computed({
    set(value){
        // 当他改变的时候，其他数据的变化
        const [firstName,lastName] = value.split("-")
        person.firstName = firstName
        person.lastName = lastName
    },
    get(){
        return `${person.firstName}-${person.lastName}`
    }
})
// 属性监视
const fullName3 = ref("")
// 监视整个对象
watch(person,(value,oldValue) => {
    console.log("watch person",value,oldValue);
    fullName3.value = `${value.firstName}-${value.lastName}`
},{deep:true,immediate:true}) // 深度监视并立即监视

// 监视fullName3
watch(fullName3,newValue => {
    console.log("watch fullName3",newValue);
    const [firstName,lastName] = newValue.split("-")
    person.firstName = firstName
    person.lastName = lastName
},{deep:true,immediate:true})
// 监视多个属性
watch([() => person.firstName,() => person.lastName, fullName3], (values) => {
    console.log("watch多个值",values);
})

// 监听所有回调中使用的数据
watchEffect(() => {
    // 在当前回调中使用的数据都会被监听
    console.log("回调中使用的数据",person.firstName,fullName3.value);
})
</script>

<template>
    <h2>姓名</h2>
    <span>firstName</span><input v-model="person.firstName" type="text">
    <span>lastName</span><input v-model="person.lastName" type="text">
    <span>fullName1</span><input v-model="fullName1" type="text">
    <span>fullName2</span><input v-model="fullName2" type="text">
    <span>fullName3</span><input v-model="fullName3" type="text">
</template>

效果

对于代码的解释

计算属性

只有getter

当前属性开其他值对于这个属性进行赋值，比如fullName1 ，他的值是由person.firstName和person.lastName共同决定的

• 当只有getter的时候，也就是计算属性的值依靠其他的属性的时候，只需要在computed函数中传一个回调就可以了

getter和setter

如果计算属性既有getter和setter就表示当前属性的值依赖与其他的属性，但是当前的值改变的时候，也会有其他影响

• 如fullName2 他的值依赖与person.firstName和person.lastName，但是他改变的时候也会影响person.firstName和person.lastName
• 当计算属性有getter和setter的时候，我们的computed需要传一个对象，对象中有get和set方法，get的方法用于对于计算属性进行赋值，set的方法用于当前属性改变的时候做出的动作

监视

在vue3中我们一般使用watch函数进行监视

监视单个值

如监视fullName3的例子

• watch函数的第一个值传需要监视的值
• 第二个参数为一个回调函数，这个回调函数有两个参数，一个是新值，一个是旧值
• 第三个参数为一个配置对象
  • deep表示深度监视
  • immediate初始化的时候是否立即监视

监视多个值

如监视多个值的时候

• watch的第一个参数为一个数组
• 如果是ref指定的属性，直接写入数组就可以，如果是reactive指定的属性，需要传一个回调函数

watchEffect

• 回调中使用的数据都会得到监视
• 如例题中的person.firstName,fullName3.value，这两个值都会得到监视

计算属性缓存

• 我们需要注意的是计算属性是有缓存的，例如题目中

const fullName1 = computed(() => `${person.firstName}-${person.lastName}`)

• fullName1 依赖于person.firstName和person.lastName，当firstName或者lastName改变的时候，他就会运行计算属性的表达式，计算出fullName1
• 但是只要person.firstName和person.lastName不改变，我们读取fullName1 的时候，他会读取缓存，不在运行表达式进行计算