当前位置：首页 > article >正文

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

article 2025/1/12 1:57:11

计算属性(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) //(只要数据源发生改变就会打印)
	})