vue3的watch和watchEffect你了解吗

前言 vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项.他可以实现在一个属性变更的时候,去执行我们想要的行为.比如: 当ID改变的时候,从数据库里面获取新的数据. 当属性变换的时候执行一个动画. 当搜索条件变更的时候,更新查询到的数据. 但是 vue3 除了 watch api, 还新增了一个 watchEffect 的 api, 我们来看看他的用法.

1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

目录 一.watch 新用法 1.1.watch 使用语法 1.2.watch 监听多个属性值 1.3.watch 监听引用数据类型 二.watchEffect 三.watch 与 watchEffect 区别和联系 3.1.watch特点 3.2.watch 配置项 3.3.watchEffect 特点 3.4.watch 与 watchEffect 联系 一.watch 新用法 选项式API中,watch 使用 watch:{ mood(curVal,preVal){ console.log

目录 响应式依赖收集 Watch WatchEffect 什么时候用什么? 大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖.watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景. 你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的. watch- 显式指定依赖源,依赖源更新时执行回调函数 watchEffect - 自动收集依赖源,依赖源更新时重新执行自身 响应式依赖收集 首先先需要了解一下 vue 3

目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用