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