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

vue3的 computed 计算属性与 watch监听

news 来源：原创 2024/4/28 12:04:38

看下

vue2 的计算属性 computed

（有this ,但是 vue3 是没有的，我们说过vue3的this是undefined）

vue3的computed 函数

与vue2 中的computed 配置功能一致。
(注意的是简写会在修改的时候警告，所以我们按照完整写法写入。)

写法：
引入 computed

import {computed} from 'vue'
setup(){
	完整写入方法 
		let fullName = computed({
				get(){ //读取
						return preson.firstName +  '-'  + preson.lastName
					},
				set(value){ // 修改
				 	const nameArr = value.split（‘-’） 
				 	preson.firstName = nameArr[0]
				 	preson.lastName = nameArr[1]
				}
		})
	return {
		fullName 
	}
}

在这里插入图片描述

先看下

vue2 中的监听 watch

在这里插入图片描述

在这里插入图片描述
vue2 中深度监听和立即监听

vue3 的watch 函数监听（可以接收三个参数）

不过有两个坑要注意：
1：监听reactive定义的响应式数据时：oldvalue无法正确获取。强制开启了深度监听（deep配置失效）。
2：监听reactive定义响应式数据中某个属性时，deep配置有效。

代码展示

import {ref, reactive, watch} from 'vue'
setup(){
	let sum = ref(0) // 一个
	let msg = ref（‘你好啊’）// 多个
	let preson = reactive({
		name: '张三'，
		age: 18，
		job:{
			j1:{
					xinzi:20
				},
			j2:{
			        xinzi: 20
				}
		}
	})
	
	情况一： 监听ref所定义的一个响应式数据
	watch（sum，（newValue, oldValue）=>{
		console.log('sum变化', newValue, oldValue)
	}，{immediate:true}）
	
	情况二：监听多个ref所定义的响应式数据
	watch（[sum，msg]，（newValue,oldValue）=>{
		console.log('sum/msg变化', newValue, oldValue) // 打印下看看吧
	},{immediate:true}）
	
	情况三：监听reactive  所定义的响应式数据（对象）：
		注意：1此处无法正确的获取oldvalue.
		注意：2 强制开启了深度监听且deep配置无效
	watch（person，（newValue,oldValue）=>{
		console.log('person变化了', newValue, oldValue) // 有坑一，且目前无法解决，看官网后期怎优化
	}，{immdiate:true, deep:false}） // 这里的 deep配置无效
	
	情况四： 监听reactive  所定义的响应式数据（对象）中的某个属性。
	注意要写成一个函数形式，不能直接取监听对象属性 
	watch（()=>person.age，（newValue,oldValue）=>{
		console.log('person变化了', newValue, oldValue) // 有坑一，且目前无法解决，看官网后期怎优化
	}，{ immdiate: true, deep:  true}）
	
	情况五：监听reactive  所定义的响应式数据（对象）中的某写属性
	watch（[()=> person.name, ()=>person.age], （newValue,oldValue）=>{
		console.log('person的name ,age 变化了', newValue, oldValue) // 有坑一，且目前无法解决，看官网后期怎优化
	}，{ immdiate: true, deep:  true}）
	
	特殊情况：监听对象中的对象...(监听深度对象)
	watch（()=>person.job，（newValue,oldValue）=>{
		console.log('person的job变化了', newValue, oldValue) // 有坑一，且目前无法解决，看官网后期怎优化
	}，{ immdiate: true, deep:  true}）// 此处由于监听的是reactive 所定义的对象中的某个属性，所以deep配置有效。
		
	return {
		sum,  msg，// 基础的数据
		preson  // 对象
	}
}

情况二
在这里插入图片描述
情况三

情况四

情况五

总结