vue3 计算属性(computed)和监听属性（watch）的异同

Nancy哇2024-03-19 10:38

计算属性(computed)

javascript 复制代码

//使用计算属性 {{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）

javascript 复制代码

//一--------监听字符串
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里面名称相同的属性。

计算属性适用于派生出新的数据，而监听属性适用于在数据变化时执行异步操作或复杂逻辑。