vue3,watchEffect和watch监听

最新推荐文章于 2024-09-04 22:44:21 发布

早上春树.

最新推荐文章于 2024-09-04 22:44:21 发布

阅读量411

点赞数 1

文章标签： vue.js javascript elementui 前端开发语言

本文链接：https://blog.csdn.net/dd0833/article/details/123493176

版权

本文介绍了Vue3中的watchEffect和watch的用法。watchEffect会立即响应式追踪并执行函数，当依赖变化时重新运行。watch则提供了与选项式API相同的功能，可以监听单一源或多个源的变化，支持getter函数和ref作为数据源。

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

1.watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

import { watchEffect,ref,reactive } from 'vue';
// 1-1.监听 ref 声明的值
setup(){
    const count = ref(0);
    watchEffect(()=>{
       console.log(count.value) // 这里的值会被打印两次，0，1
    })
    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)
}
// 1-2.监听 reactive 声明的值

setup(){
    const data = reactive({num:0});
    watchEffect(()=>{
       console.log(data.num) // 这里的值会被打印两次，0，1
       console.log(data) // 这里的对象只会被打印一次
    })
    setTimeout(() => {
      data.num++
    }, 100)
}
// 注意： 如果监听函数中打印的是data只会被监听到一次
// 特别注意：watchEffect 并不需要传入具体的监听对象。但是他也同样监听不到 非ref类型，和 getter 函数的变化。

setup(){
    const obj = {age:10};
    watchEffect(()=>{
       console.log(obj.age) // 只能打印一次 10 // 监听不到obj数据的变化
    })
    setTimeout(() => {