当前位置：网站首页>watch VS watchEffect

watch VS watchEffect

2022-07-27 13:09:00 【Lyrelion】

如何使用 watch ？

如何在首次监听后，自动取消 watch 监听？

如果需要跟踪多个响应式变量，有什么好的解决方案吗？

watchEffect VS computed

如何使用 watchEffect ?

使用 onInvalidate() 清除 watchEffect 副作用

使用 watchEffect 返回的 stop 方法，停止 watchEffect 监听

使用 flush 修改 watchEffect 监听的时机

如何使用 watch ？

Vue Options API 提供了一个 watch 选项

export default {
  data () {
    return {
      title: 'Vue2'
    }
  },
  watch: {
    // Watcher
  }
}

  watch: {
    title: {
      handler: (newTitle, oldTitle) => {
        console.log("Title changed from " + oldTitle + " to " + newTitle);
      },
      immediate: true,
    },
  },

适用场景：

需要控制哪些依赖项会触发该方法
需要访问之前的值

如何在首次监听后，自动取消 watch 监听？

调用 watch 自身，可以实现此需求

/**
 * 监听 vuex 里开发者配置改变
 */
const watchInitData = watch(
  () => store.state[VuexModule.ApplicationLibDevelopment],
  async (newVal) => {
    // 页面初始化
    initPage();
    // 调用 watch 本身，可以实现取消监听
    watchInitData();
  },
  { deep: true },
);

如果需要跟踪多个响应式变量，有什么好的解决方案吗？

在 Vue Options API（Vue2）中，可以创建多个 watch 观察者

在 Composition API（Vue3）中，可以创建多个 watchEffect 观察者；也可以只创建一个 watchEffect，但在他的回调函数中，写上所有要监听的值

watchEffect VS watch

是否需要指手动传入依赖

watch —— 既要指明监视的属性，也要指明监视的回调【需要手动传入依赖】

watchEffect —— 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性【不需要手动传入依赖，会从回调函数中自动获取】

是否为惰性的

watch 是惰性的 —— 仅当依赖项更改时，才会触发；可以为 watch 传递一个 immediate 属性，使其在初始化时运行

watchEffect 是非惰性的 —— 在创建组件后立即运行，同时，在方法的任何依赖项发生更改时运行

每次监听依赖项时返回的值

wach —— 每次监听，都会返回新旧值

watchEffect —— 每次监听，只会返回最新的值；只有在页面初始化时，才能拿到一次旧值

watchEffect VS computed

watchEffect 和 watch 一样，都有点像 computed

computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值
watchEffect 注重的是过程（回调函数的函数体），所以不用写返回值

如何使用 watchEffect ?

在初始化组件时立即运行（组件初始化时，watchEffect 将运行并记录起始值）
在依赖项发生变化时运行（当监听对象的值改变时，就会触发 watchEffect）

由第二点可得：在挂载 DOM 之前，尽量不要尝试访问 DOM，防止产生不必要的监听

import { ref, watchEffect } from 'vue'

export default {
  setup () {
    const userID = ref(233)

    watchEffect(() => console.log('userID: ' + userID.value))
    
    setTimeout(() => {
      userID.value = 666
    }, 500)

    return {
      userID
    }
  }
}

// 打印结果
userID: 233
userID: 666

也可以在组件中，使用 watchEffect 结合 props 进行使用

export default {
  props: {
    movieID: String,
  },
  setup(props) {
    watchEffect(() => console.log(props.movieID))
  },
}

使用 onInvalidate() 清除 watchEffect 副作用

每当 watchEffect 监听到了依赖项变化时，就执行一个异步请求；

但是在异步请求完成之前，依赖项又发生了变化……

如何避免再一次发请求？

export default {
  setup() {
    watchEffect(onInvalidate => {
      // 异步请求
      const apiCall = someAsyncMethod(props.songID)

      onInvalidate(() => {
        // 取消异步请求
        apiCall.cancel()
      })
    })
  }
}

使用 watchEffect 返回的 stop 方法，停止 watchEffect 监听

可以手动停止 watchEffect 监听

试想一下，如果你想观察一个依赖项，直到他变成某个值，就不希望继续监听了

继续监听属于浪费资源了，如何实现手动停止 watchEffect 监听？

watchEffect 返回了 stop 方法，调用它，可以手动停止 watchEffect 监听

export default {
  setup (props) {
    let stopWatcher = watchEffect(() => console.log(props.movieID))
    stopWatcher()
  }
}

使用 flush 修改 watchEffect 监听的时机

watchEffect 默认在组件加载好之前，就会调用一次监听，举个栗子：

const state = reactive({
  test: {
    myName: '',
  }
});

state.test.myName = 'Lyrelion' 

watchEffect(() => {
  console.log('名字被修改了', state.test.myName );
})

/**
 * 打印结果（在组件更新前，watchEffect 就执行了一次监听，所以会打印两次）
 * 名字被修改了 
 * 名字被修改了 Lyrelion
 */

如果在组件加载好之前，我不想执行监听呢？也就是说，修改 watchEffect 监听时机

可以通过修改 watchEffect 中的 flush 属性，指定监听时机

flush 有以下三种可设置项：

pre （默认）
post （在组件渲染完成后触发，访问加载后的 DOM，这就可以防止初始值还没附上，就开始监听了的问题）
sync （与 watch 一样，每个更改都强制触发侦听器，这是低效的，应该很少需要）

综上所述，为了在组件加载好之前，不执行监听，可以这么写

const state = reactive({
  test: {
    myName: '',
  }
});

state.test.myName = 'Lyrelion' 

watchEffect(() => {
  console.log('名字被修改了', state.test.myName );
}, {
  flush: 'post'
})

/**
 * 打印结果（在组件更新前，watchEffect 就执行了一次监听，所以会打印两次）
 * 名字被修改了 Lyrelion
 */

补充一篇写的不错的文章

VUE3中watch与watchEffect —— 全网最详细系列_海底烧烤店ai的博客-CSDN博客_watch和watcheffectVUE3——watch与watchEffect详解一、 watchEffect1. 停止监听2. 更改监听时机（更改副作用刷新时机）3. 清除副作用4. 侦听器调试一、watch1. 监听单一源2. 监听多个源3. 侦听响应式对象4. 深度监听5. 立即执行在讲watch之前，我们先来看看watchEffect一、 watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。watchEffect的一些特点：不需要手动传入依赖（不用指定监听对象）无https://blog.csdn.net/m0_51969330/article/details/123673334?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123673334-blog-112723178.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-123673334-blog-112723178.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=2