计算属性(computed)
//使用计算属性 {{fullName}}
//使用方法 {{fullName() }}const firstName=ref("杰克")
const lastName=ref("麻子")
//计算属性
const fullName=computed(()=>firstName.value+"-"+lastName.value)
//方法
const fullName=()=>firstName.value+"-"+lastName.value计算属性和方法比较？
相同：结果完全相同。
不同：计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才会重新计算。 方法调用总是会在重渲染发生时再次执行函数。比较消耗性能。
//计算属性只读，使用
fullName.value,其数据源可以修改(firstName,lastName)
监听属性（watch）
//一--------监听字符串
let person=ref("")
watch(person,(newvalue,oldvalue)=>{})//二------监听对象
let person=ref({name:"张三",age:18})
/* watch(person,(newvalue,oldvalue)=>{console.log(newvalue,oldvalue) //当改变v-model的person.name值时，此时拿不到值，因为watch是一个浅层监听，需要深度监听。
}) **/
//开启深度监听
//① 监听某个特定的值，name
watch(()=>person.value.name,(newvalue,oldvalue)=>{})
//② 监听不确定哪一个值
watch(person,(newvalue,oldvalue)=>{},{deep:true},{immediate:true})
//immediate:true开启立即执行，立马拿到原数据//三-------watchEffect 自动监听哪些数据发送改变
watchEffect(()=>{console.log(newvalue,oldvalue) //(只要数据源发生改变就会打印)})
区别
- 计算属性函数必须有return函数，监听属性不必须。
- .计算属性不能执行异步操作，watch允许在发生改变时执行异步操作或复杂的逻辑。
- 计算属性是基于它们的依赖进行缓存的，只有依赖发生变化才会重新计算，watch没有缓存，数据发生改变 直接触发对应的事件。
- computed可以自定义名称，而watch只能监听 props和data里面名称相同的属性。
计算属性适用于派生出新的数据，而监听属性适用于在数据变化时执行异步操作或复杂逻辑。
)
