Vue3 计算属性，监听属性_vue3监听属性-优快云博客

本文链接：https://blog.youkuaiyun.com/cloki/article/details/127079502

本文详细介绍了Vue.js中计算属性`computed`和监听属性`watch`的用法，包括它们的定义、参数及不同用例。计算属性在依赖值变化时自动更新，而监听属性则允许自定义更新逻辑。此外，还提到了`watchEffect`的使用，它会在依赖变化时立即执行并响应式追踪。文章涵盖了这些概念的基本用法和高级特性，如清除副作用、更新时机等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性，监听属性

1、计算属性computed：当以来的属性发生变化时，就会触发他更改；若依赖的值不发生改变，则使用缓存中的值。

语法：

import { ref, computed } from 'vue';
let price = ref<number | string>(1);
// 函数写法
let com = computed<string>(() => {
    return '$' + price.value;
});
// 对象写法
let com1 = computed({
    get: () => {
        return price.value;
    },
    set: val => {
        price.value = '$' + val;
    },
});

2、监视属性watch：接收三个参数（第一个参数监视的属性/对象，第二个参数回调函数，第三个参数配置对象）

监视ref

import { ref, watch } from 'vue';
// 监视一个ref属性，newVal、oldVal与监视的值保持一直
let price = ref<number | string>(1);
watch(price, (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
});
// 监视多个ref属性，newVal、oldVal是一个数组
let price = ref<number | string>(1);
let price1 = ref<number | string>(1);
watch([price, price1], (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
});
//监视一个ref对象
let message = ref({
    nav: {
        bar: {
            name: 'zhangsan',
        },
    },
});
watch(
    message,
    (newVal, oldVal) => {
        console.log(newVal, oldVal);
    },
    {
        immediate: true,// 初始化就开启监视
        deep: true,// 开启深度监视
    }
);

监视reactive

注意：当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

import { reactive, watch } from 'vue';
// 监视一个reactive对象，监视reactive对象默认就会开启深度监视
let message = reactive({
    nav: {
        bar: {
            name: 'zhangsan',
        },
    },
});
watch(message, (newVal, oldVal) => {
    console.log(newVal, oldVal);
});
// 监视reactive对象中的某个属性
watch(
    () => message.nav.bar.name,
    (newVal, oldVal) => {
        console.log(newVal, oldVal);
    }
);

3、watchEffect：立即执行传入的函数，同时响应式追踪其依赖，依赖发生改变时立马执行该函数。

清除副作用：就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
        // 回调函数，先执行这个里面的内容
    })
    console.log('message2', message2.value);
})

停止跟踪 watchEffect 返回一个函数调用之后将停止更新

const stop =  watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
 
    })
    console.log('message2', message2.value);
},{
    flush:"post",//设置为post，可以在watch里获取dom元素
    onTrigger () {
 		//调试debugger
    }
})
stop()