vue3组合api watch与computed的用法

最新推荐文章于 2024-08-17 08:50:42 发布

沉迷...

最新推荐文章于 2024-08-17 08:50:42 发布

阅读量1.6k

点赞数 3

分类专栏： vue3 文章标签： javascript node.js html5 vue-cli3

本文链接：https://blog.csdn.net/weixin_42343307/article/details/120228512

版权

vue3 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue3中watch和watchEffect的使用方法，包括它们的区别、监听不同类型的响应式数据、配置选项的设置以及如何监听对象的特定属性。通过实例展示了监听ref和reactive定义的响应式数据，并探讨了深度监听（deep）和立即触发（immediate）的用法，同时提到了计算属性computed的简写和完整形式。

摘要由CSDN通过智能技术生成

vue3组合api watch的用法

两个小“坑”：

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

监听ref定义的普通值响应式数据

// 1、侦听器-基本类型
const count = ref(10)
// 侦听普通值基本使用
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

监听reactive定义的响应式数据

如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的。

const obj = reactive({
  msg: 'tom'
})

// 侦听对象
// watch(obj, (newValue, oldValue) => {
watch(obj, () => {
  // console.log(newValue === oldValue)
  console.log(obj.msg)
})

const handleClick = () => {
  obj.msg = 'jerry'
}

监听多个响应式数据数据

//可以得到更新前后的值；侦听的结果也是数组，数据顺序一致
const n1 = ref(1)
const n2 = ref(2)
watch([n1, n2], (v1, v2) => {
  // v1和v2都是数组
  // v1表示被监听的所有值的最新值
  // v2表示被监听的所有值的原有值
  console.log(v1, v2)
})

监听reactive定义的响应式数据的某一个属性

如果侦听对象中当个属性，需要使用函数方式，侦听更少的数据有利于提高性能。

// 如果侦听对象中当个属性，需要使用函数方式
watch(()=>person.job,(newValue,oldValue)=>{
  console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

配置选项用法

immediate: true,表示组件渲染时立即调用
deep:true，表示深度监听对象里面的子属性（被侦听的内容需要是函数的写法）

// watch方法的配置选项
// immediate: true 表示，组件渲染后，立即触发一次
watch(() => stuInfo.friend, () => {
  console.log('sutInfo')
}, {
  immediate: true,
  // 被侦听的内容需要是函数的写法 () => stuInfo.friend
  deep: true
})

监视reactive定义的响应式数据中的某些属性

watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
  console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
- 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
- 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

vue3组合api 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]
        }
    })
}