定义
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里面需要打开控制台看一下参数就理解了。