计算属性和监听属性的本质区别就在于，计算属性一般是多对一的关系，一般是由多个数据计算出来一个派生数据。而监听属性是一对多的关系。一个数据发生了变化，可以执行多个别的操作。
computed计算属性是什么？
computed是计算属性主要是将模板里面的业务代码，转移到script里面，便于维护。
另外他生成了一个派生属性。比如给computed姓和名，能重新计算出一个新的属性姓名属性。
watch监听属性是什么？
用于命令式的监听数据的变化并执行别的操作。适用于数据变化后执行特定的行为，比如说监听关键词的变化发起请求。
从触发时机来说computed依赖的数据变化时自动重新计算，watch时监听的数据变化时，触发回调。
从缓存机制这块来说computed有缓存，只有当依赖的数据变化时才会重新计算，否则会从缓存中读取之前的计算结果。watch没有缓存，每次变化都执行回调函数。
从返回值这块来说computed相当于计算的是一个派生数据，必须返回计算结果，watch无需返回值，他侧重的是变化后执行的操作。
从异步支持这块来说，computed是同步计算的，不支持异步，而watch是支持异步操作的
另外watch有两个配置选项分别是immediate和deep立即开始无需监视的内容发生变化和深度监视，数组这种复杂类型内部属性值的变化是监视不到的，要使用deep配置项才能监视到，他们默认是关闭的，用的时候需要打开。
computed
<script setup>
import {ref,computed} from 'vue'
const firstName = ref('')
const lastName = ref('')
const Cname = computed(()=>{
return firstName.value+'-'+lastName.value
})
const Fname = function(){
return firstName.value+'-'+lastName.value
}
</script>
<template>
<view>
<input type="text" placeholder="请输入姓" v-model="firstName" />
<input type="text" placeholder="请输入名 " v-model="lastName"/>
<view>
全名（原生）是：{{firstName +'-'+ lastName}}
<br />
全名（计算属性）是：{{Cname}}
<br />
全名（方法）是：{{Fname()}}
</view>
</view>
</template>
<style lang="scss" scoped>
input{
border:1px solid seagreen;
padding:0 10px;
margin-top: 10px;
}
</style>
watch
<template>
<view class="out">
<input type="text" v-model="person.name" placeholder="请输入">
</view>
{{person}}
</template>
<script setup>
import {ref,watch} from 'vue'
const person = ref({
name:"张三",
age:23
})
//只监听某个属性
// watch(()=>person.value.name,(newValue,oldValue)=>{
// console.log("新值"+newValue)
// console.log("老值"+oldValue)
// })
// 深度监听
watch(person,(newValue)=>{
console.log("新值",newValue)
},{deep:true,immediate:true})
//监听所有属性
watchEffect(()=>{
console.log(person.value)
})
</script>
<style lang="scss" scoped>
input{
border:1px solid red;
margin-top: 10px;
}
</style>
