computed和watch、watchEffect

文章目录

一、computed计算属性：

computed特点： 

二、watch监听器：

watch特点: 

vue3.x监听 reactive 所定义的一个响应式数据

 vue3.x监听 reactive 所定义的一个响应式数据中的某个属性,需要写到函数里面

vue3.x监听 reactive 所定义的一个响应式数据中的某些属性(需要用数组包裹，在写到函数里面) 

 三、watchEffect函数

 四、使用场景

---

前言

computed 计算属性 : computed储存需要处理的数据值，依赖其它的属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，再获取 computed 的值时才会重新计算。

watch监听器:用于监听数据变化，当监听的数据发生变化时执行回调进行后续操作。监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数(newValue,oldValue),新值，旧值。

---

一、computed计算属性：

setup(){
   let p = reactive({
       startName:'李',
       endName:'增'
    })
   p.fullName = computed({
       get(){
           return p.startName + '-' + p.endName
        }
       set(val){
           let res = val.split('-')
           p.startName = res[0];
           p.endName = res[1];
        }
    })
}

如上代码所示，startName和endName的值发生改变时，fullName的值根据startName和endName重新进行计算。 

<template>
    <p>total:{
  {arrTotal}}</p>
</template>

<script>
    export default{
        data(){
            return{
                arr:[1,2,3,4]
            }
        },
        mounted(){
            setTimeout(()=>{
                this.arr[0] =5;
            },2000)
        },
        computed:{
            arrTotal:function(){
                let total = 0;
                this.arr.map(item=>{
                    total += item;
                })
                return total;
            }
        }
    }
</script>

computed特点： 

•  支持缓存，当依赖的数据发生改变&#x