Computed

介绍：Computed 又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed 具有缓存性，当无关值变化时，不会引起 computed 声明值的变化。产生一个新的变量并挂载到 vue 实例上去。

一、函数式写法

在 vue2 中，computed 写法：

computed:{  
    sum(){   
        return this.num1+ this.num2  
    } 
}

在 vue3 如果使用选项式 API 也可以这样写，主要看下组合式 API 的使用。

示例 1：求和

import { ref, computed }  from "vue"

export default { 
    setup(){  
        const num1 = ref(1)  
        const num2 = ref(1)  
        let sum = computed(()=>{  
            return num1.value + num2.value   
        }) 
    }
}

调用 computed 时，传入了一个箭头函数，返回值作为 sum 。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：

let sum = computed(()=>{
    return num1.value + num2.value  
})  
let mul = computed(()=>{
    return num1.value * num2.value  
})

二、options 写法

计算属性默认只有 getter ，在需要的时候也可以提供 setter 。在 vue2 中用法如下：

computed:{ 
    mul:{  
    get(){ 
        // num1 值改变时触发
        return this.num1 * 10
        },  
    set(value){ 
        // mul 值被改变时触发    
        this.num1 = value /10   
        }  
   }}

mul 属性是给 num1 放大 10，如果修改 mul 的值，则 num1 也随之改变。

在 vue3 中：

let mul = computed({ 
    get:()=>{   
        return num1.value *10  
    }, 
    set:(value)=>{   
        return num1.value = value/10 
    } 
})

这两种写法不太一样，仔细观察区别不大，get 和 set 调用也是一样的。

三、computed 传参

计算属性需要传入一个参数怎么写呢?

<template> 
    <div>  
        <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)">    
            {{item}}   
        </div>
    </div>
</template>
<script>
import { ref, computed,reactive } from "vue"

export default{ 
    setup(){   
        const arr = reactive([    '哈哈','嘿嘿'   ])  
        const sltEle = computed( (index)=>{   
        console.log('index',index);   
    })  
    return{ arr,sltEle }
    } 
}
</script>

直接这样写，运行的时候，出现错误：Uncaught TypeError: $setup.sltEle is not a function。

原因：computed 计算属性并没有给定返回值，我们调用的是一个函数，而 computed 内部返回的并不是一个函数，所以就会报错：sltEle is not a function。

解决办法：

需要在计算属性内部返回一个函数。修改代码如下：

const sltEle = computed(()=>{ 
        return function(index) {  
        console.log('index',index);
    } 
}

watch

深度监听（deep)、立即执行（immediate）:主要针对复杂数据类型或者需要立即执行的侦听函数

watch: { 
    "要侦听的属性名": {  // 监听对象的某个属性，被监听的属性值发生变化就会执行函数
        immediate: true, // 立即执行 
        deep: true,  // 深度侦听复杂类型内变化 
        handler (newVal, oldVal) { 
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            console.log(newVal, oldVal);
        } 
    } 
}

handler: 固定方法触发. 侦听函数必须叫handler(必写)
deep: 开启深度侦听(必写)
immediate: 立即侦听(页面初始化时handler立即执行一次)

Vue中计算属性Computed和watch 用法详解

Computed

一、函数式写法

二、options 写法

三、computed 传参

watch