VUE -- computed

定义

computed定义：处理复杂逻辑的响应式计算
vue3 之后用computed用的比较多，相对来说侦听器用的就比较少，侦听器是监听一个属性值的变化，进行后续操作，而computed的功能已经涵盖很多

触发条件：当页面加载会计算一次，后续计算中使用的值发生改变，就会跟着值改变的次数调用多少次拿到最新的值

---

demo

正常用法

<template>
    <div id="watch-example">
        <p>
            <input v-model="fullName"/>
        </p>
        <p>{{ fullName }}</p>
    </div>

</template>
<script lang="ts" setup>
import Edit from './edit.vue'


const data = reactive({
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
})

const fullName = computed({
    
    get() {
        return data.firstName + ' ' + data.lastName
    },
    
    set(newValue) {
        console.log(newValue)
        const names = newValue.split(' ')
        data.firstName = names[0]
        data.lastName = names[names.length - 1]
    }
    
})


</script>

默认用法

<template>
    <div id="watch-example">
        <p>
            <input v-model="fullName"/>
        </p>
        <p>{{ fullName }}</p>
    </div>

</template>
<script lang="ts" setup>
import Edit from './edit.vue'


const data = reactive({
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
})

const fullName = computed(()=> {
    return data.firstName + ' ' + data.lastName
})


</script>

默认我们只是计算一个值,但是如果计算的值不是由其他改变而重新计算改变的值，而是计算的值拿出来当参数被改变，那么就会出发set 方法，默认使用的是 get方法，demo里面需要打开控制台看一下参数就理解了。