简单了解一下vue的 watch 和 computed

Watch

默认不主动执行:
- watch 是一种响应式的侦听器，它监听指定的数据变化，并在数据变化时执行指定的回调函数。
- 默认情况下，watch 不会在组件加载时立即执行，而是在其监听的数据变化时才会执行相应的回调函数。
监听某个变量的变更:
- watch 通常用于监听一个或多个数据的变化，可以是简单的数据变量，也可以是对象或数组的特定属性。
执行内部的回调:
- 当监听的数据发生变化时，watch 会执行预先定义的回调函数。这使得 watch 特别适合处理异步操作、复杂逻辑或需要深度定制响应的场景。
代码示例:

<template>
    <div>
        <h2>{{ temp }}</h2>
        <h2>{{ suggest }}</h2>
        <button @click="add">+1</button>
        <button @click="minus">-1</button>
    </div>
</template>

<script setup>
import {ref,watch,computed}from 'vue'
let temp = ref(5)
let suggest= ref('夹克')
const add= () =>{
    temp.value += 5
  }
}

const minus= () =>{
    temp.value -= 5
}
watch(temp.value, (newVal,oldVal) => {
    console.log(newVal, oldVal);
    if(newVal>=30){
        suggest.value = '短袖'
    }
    else if (newVal>=20){ 
        suggest.value = '夹克'
        
    }
    else if (newVal>=10){
        suggest.value = '棉袄'
    }
    else {
        suggest.value = '羽绒服'
    }}
)
</script>

<style lang="css" scoped>

</style>

效果图(默认不会主动执行)：

5. 解决方法: 只要设置immediate为true，代码如下：

<template>
    <div>
        <h2>{{ temp }}</h2>
        <h2>{{ suggest }}</h2>
        <button @click="add">+1</button>
        <button @click="minus">-1</button>
    </div>
</template>

<script setup>
import {ref,watch,computed}from 'vue'
let temp = ref(10)
const add= () =>{
    temp.value += 5
  }
}

const minus= () =>{
    temp.value -= 5
}
watch(temp.value, (newVal,oldVal) => {
    console.log(newVal, oldVal);
    if(newVal>=30){
        suggest.value = '短袖'
    }
    else if (newVal>=20){ 
        suggest.value = '夹克'
        
    }
    else if (newVal>=10){
        suggest.value = '棉袄'
    }
    else {
        suggest.value = '羽绒服'
    }}
)
</script>

<style lang="css" scoped>

</style>

 效果图:

Computed

默认主动执行:
- computed 是一种声明式的计算属性，依赖于响应式数据，并且具有缓存机制。
- 在组件加载时，computed 会立即计算其值，并且在其依赖的响应式数据变化时自动重新计算。
当回调中任意一个变量值变更时:
- computed 的值是基于它所依赖的响应式数据动态计算而来的。只有当计算属性依赖的响应式数据发生变化时，computed 才会重新计算其值。
缓存机制:
- computed 具有缓存机制，只有在其依赖的响应式数据变化时才会重新计算。这意味着在多次访问时，只有在依赖项变化时才会重新执行计算函数，提高了性能。
代码示例:

<template>
    <div>
        <h2>{{ temp }}</h2>
        <h2>{{ suggest }}</h2>
        <button @click="add">+1</button>
        <button @click="minus">-1</button>
    </div>
</template>

<script setup>
import {ref,watch,computed}from 'vue'
let temp = ref(10)
const add= () =>{
    temp.value += 5
  }
}

const minus= () =>{
    temp.value -= 5
}
const suggest=computed(()=>{
    if(temp.value>=30){
        return'短袖'
    }
    else if (temp.value>=20){ 
        return '夹克'
        
    }
    else if (temp.value>=10){
        return '棉袄'
    }
    else {
        return '羽绒服'
    }

})
</script>

<style lang="css" scoped>

</style>

效果图(默认会主动执行):

总结

使用场景:
- watch 适合处理异步操作、自定义的复杂逻辑、或者需要在数据变化时执行多个操作的场景。
- computed 适合用于衍生数据的计算，如格式化显示、数据过滤、排序等，以及任何需要基于现有数据计算衍生值的场景。
执行时机:
- watch 在监听的数据变化时执行，不会自动计算值。
- computed 在定义时会立即计算一次值，并在其依赖的响应式数据变化时重新计算。

理解这些区别有助于根据实际需求选择合适的响应式处理方式，从而提升代码的可读性和性能。

简单了解一下vue的watch 和computed

简单了解一下vue的 watch 和 computed

Watch

Computed

总结