Vue中的Computed与watch怎么用

这篇"Vue中的Computed与watch怎么用"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"Vue中的Computed与watch怎么用"文章吧。

computed

computed只接收一个getter函数

1、getter必须有返回值

2、computed返回一个只读响应式ref对象 （只读、响应式、对象）

注意：omputed只接收一个getter函数时，返回的只读对象，也就是不能修改他的返回值！

getter触发条件

• 1、computed返回值首次被读取时

• 2、getter绑定的响应式变量被修改时

computed同时接收getter函数对象和setter函数对象

1、setter函数对象没有返回值

2、computed返回一个可读可写响应式对象

3、setter函数对象有参数，是getter的返回值，也是computed的值

4、修改computed返回值，触发setter函数对象执行，但不会真正修改computed返回值（setter内改变getter计算值就会改变computed返回值）

setter触发条件

computed返回值被修改时

实例：

调试 Computed

使用范围：仅开发模式生效

computed的第二参数：带有 onTrack 和 onTrigger 选项的对象

• onTrack ：getter关联的响应式数据时触发。

• onTrigger ：getter关联的响应式数据被修改时触发

watchEffect

语法：

• 参数1：触发监听回调函数，回调函数可传入一个onInvalidate函数作为参数！

• 可选参数2：对象，包含3个可选属性flush、onTrack、onTrigger

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

1、会立即执行一次（和watch的immediate属性效果一致）

2、关联的响应式数据被修改时触发

3、会自动感知代码依赖，和watch不一样，watchEffect会主动绑定监听数据

局限性：不能监听对象(但可以监听对象的属性)，只能监听类似ref基本数据类型的响应式数据

立即执行 监听基本数据类型

停止watchEffect

隐式：组件卸载时自动停止

显式：调用watchEffect 返回值

const stop = watchEffect(() => {  /* ... */})// 显式停止stop()

清理watchEffect

语法： watchEffect( onInvalidate=>{ onInvalidate(()=>{ }) })

onInvalidate 是一个函数！优先触发！

onInvalidate 执行时机:

1、watchEffect被重新触发时

2、组件卸载时

注意：关联的响应式数据首次被修改时不会触发onInvalidate函数！

作用： 清理定时器、事件监听removeEventListener 。。。

import { ref, watchEffect } from 'vue'const num = ref(1)watchEffect((onInvalidate ) => {    console.log('watchEffect-1');    num.value++    onInvalidate (()=>{        console.log('onInvalidate-2');    })    console.log('watchEffect-3');})//1、watchEffect   被重新触发时// onInvalidate-2// watchEffect-1// watchEffect-3//2、组件卸载时// onInvalidate-2//3、关联的响应式数据首次被修改（组件被挂载时）//  watchEffect-1//  watchEffect-3

watchPostEffect 和 watchSyncEffect

watchPostEffect 和 watchSyncEffect在Vue3.2新增,是watchEffect类似语法糖的东西,

是watchEffect可选参数对象{ flush?: 'pre' | 'post' | 'sync'}中post和sync的语法糖，pre是默认值

推迟触发watchPostEffect

watchPostEffect 是watchEffect可选参数对象{flush:'post'}的语法糖

推迟watchEffect触发时机！组件更新前触发！也就是在生命周期onBeforeUpdate和 onUpdated之间触发

语法：

//推迟触发watchEffectwatchEffect(  () => {    /* ... */  },  {    flush: 'post'  })//Vue3.2语法糖watchPostEffectwatchPostEffect(()=>{  /* ... */})

实例：

//实验watchEffect第二参数 flush: 'post'属性watchEffect(() => {    console.log("实验watchEffect第二参数 {flush: 'post'}属性");    console.log(obj.age);},{   flush:'post' })watchEffect(() => {    console.log("watchEffect正常时机触发");    console.log(obj.age);})//生命周期onUpdatedonUpdated(()=>{    console.log('onUpdated()');  })//生命周期onBeforeUpdateonBeforeUpdate(()=>{    console.log('onBeforeUpdate()');})

修改obj.age时，执行结果：

watchEffect正常时机触发
onBeforeUpdate()
实验watchEffect第二参数 {flush: 'post'}属性
onUpdated()

同步触发watchSyncEffect

watchSyncEffect 是watchEffect可选参数对象{flush:'sync'}的语法糖

强制效果始终同步触发！效率低！也就是默认watchEffect之前触发

语法：

watchEffect(  () => {    /* ... */},  {    flush: 'sync'  })//Vue3.2语法糖watchSyncEffectwatchSyncEffect(()=>{  /* ... */})

watchEffect不能监听对象

//假设修改了对象的属性值-修改了obj.ageconst obj = reactive({ name: '小明', age: 18 })//watchEffect不能监听对象变化watchEffect(() => {    console.log('watchEffect监听对象变化');    console.log(obj);})//watchEffect可以监听对象属性变化watchEffect(() => {    console.log('watchEffect监听对象属性变化');    console.log(obj.age);})//watch监听对象变化watch(obj, (obj) => {    console.log('watch监听对象变化');    console.log(obj);})

总结：watchEffect用来监听能监听基本数据类型，不能监听对象，但能监听对象的属性;watch能监听基本数据类型和对象！

watch

语法：

• 参数1-被监听数据（形式：单个数据、数组、带返回值的回调函数）

• 参数2-触发监听的回调函数，无返回值

• 可选参数3-对象{immediate: true,deep:true}，对象含2个可选参数和Vue2参数效果一致

Vue3的watch和Vue2的watch是基本一样的

1、需要指定监听数据

2、惰性，只在被监听数据变化时才触发（immediate属性可以设置在初始化的时候触发）

监听单个数据

参数1被监听数据的形式：

1、单个基本数据类型；

2、回调函数：返回值为单个基本数据类型；

// 侦听一个 getter//被监听数据传入一个带返回值的回调函数const state = reactive({ count: 0 })watch(  () => state.count,  (count, prevCount) => {    /* ... */  })// 直接侦听一个 refconst count = ref(0)watch(count, (count, prevCount) => {  /* ... */})

监听多个数据(传入数组)

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {  /* ... */})

官方文档总结

以下代码截取官方文档，从TS代码可以看出很多关于watch和watchEffect函数参数和返回值的细节！

computed

computed只接收一个getter函数

getter触发条件：

1、computed返回值首次被读取时

2、getter绑定的响应式变量被修改时

computed同时接收getter函数对象和setter函数对象

setter触发条件：computed返回值被修改时

// 只读的function computed(  getter: () => T,  debuggerOptions?: DebuggerOptions): Readonly>>// 可写的function computed(  options: {    get: () => T    set: (value: T) => void  },  debuggerOptions?: DebuggerOptions): Refinterface DebuggerOptions {  onTrack?: (event: DebuggerEvent) => void  onTrigger?: (event: DebuggerEvent) => void}interface DebuggerEvent {  effect: ReactiveEffect  target: any  type: OperationTypes  key: string | symbol | undefined}

watchEffect

• 参数1-触发监听回调函数，回调函数可传入一个onInvalidate函数作为参数！

• 可选参数2-对象，包含3个可选属性flush、onTrack、onTrigger

function watchEffect(  effect: (onInvalidate: InvalidateCbRegistrator) => void,  options?: WatchEffectOptions): StopHandleinterface WatchEffectOptions {  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'  onTrack?: (event: DebuggerEvent) => void  onTrigger?: (event: DebuggerEvent) => void}interface DebuggerEvent {  effect: ReactiveEffect  target: any  type: OperationTypes  key: string | symbol | undefined}type InvalidateCbRegistrator = (invalidate: () => void) => voidtype StopHandle = () => void

watch

• 参数1-被监听数据（形式：单个数据、数组、带返回值的回调函数）

• 参数2-触发监听的回调函数，无返回值

• 参数3-传入{immediate: true,deep:true}对象和Vue2参数效果一致

// 侦听单一源function watch(  source: WatcherSource,  callback: (    value: T,    oldValue: T,    onInvalidate: InvalidateCbRegistrator  ) => void,  options?: WatchOptions): StopHandle// 侦听多个源function watch[]>(  sources: T  callback: (    values: MapSources,    oldValues: MapSources,    onInvalidate: InvalidateCbRegistrator  ) => void,  options? : WatchOptions): StopHandletype WatcherSource = Ref | (() => T)type MapSources = {  [K in keyof T]: T[K] extends WatcherSource ? V : never}// 参见 `watchEffect` 共享选项的类型声明interface WatchOptions extends WatchEffectOptions {  immediate?: boolean // 默认：false  deep?: boolean}

以上就是关于"Vue中的Computed与watch怎么用"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。