vue3计算属性与监视及watchEffect函数

news2025/8/4 16:08:46

computed计算属性

首先看一下页面的结构

在v3中可以用v2的方式来写计算属性，但是不建议这么写

而想要在v3中使用计算属性，需要先引入它

它不想之前在v2中的函数了，而是要写在computed()里面

当然这个计算属性是简写（没有考虑计算属性被修改的情况，如果我们修改了它的值就会报错

因为它只是只读的，你不能去修改它

因此我们如果要修改它的值，我们可以采用v3计算属性的完整写法，就是在computed里面写成一个对象的形式，computed({})并且给他添加set，get

总结

与Vue2.x中computed配置功能一致

写法

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

watch监视ref定义的数据

首先看v2中的监听器的写法

当然这只是一个简写的形式，看一下完整写法

看一下v3中的watch的写法，在v3中你也要先去引用一下它

它这个watch是写在setup里面的，但是v3中的监视是有几个坑的

首先，比如这是情况一：监视ref所定义的一个响应式数据

情况二：监视ref所定义的多个响应式数据（像在v2中只能配置一个配置项，而在v3中可以配置多个配置项）

当然这么太过于麻烦了，我们这有一个简便的写法

就是把数据写在一个数组里面，但是现有又有一个问题了，像我们之前写的deep等配置写在哪里呢？

就是它的第三个形参，用来存放这些配置的

watch监视reactive定义的数据

上面讲了普通的数据类型，这部分是结束用reactive定义的复杂数据类型

也是用之前的watch包裹，但又一个坑，就是监视的俩个新旧值都是一样的

情况三：监视reactive所定义的全部响应式数据注意：此处无法正确的获取oldValue。

如果真的需要这个oldValue的值，但我们只能拿出去放在ref中使用

在reactive对象中，我们嵌套对象，也能监视到。

注意：强制开启了深度监视（deep配置无效）

情况四：监视reactive所定义的某一个响应式数据

它需要写成一个函数式

watch(()=>person.name,(newValue,oldValue)=>{

console.log(newValue,oldValue);

})

情况五：监视reactive所定义的某些响应式数据,就是写成数组的形式

特殊情况监视的是reactive元素定义的对象中的某个属性，所以deep配置有效

总结

与Vue2.x中watch配置功能一致

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效