举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vue3响应式api Vue 3.0 响应性API Computed与watch

vue3响应式api Vue 3.0 响应性API Computed与watch

2023-04-27 01:18 VUE3教程

vue3响应式api Vue 3.0 响应性API Computed与watch

vue3响应式api Vue 3.0 响应性API Computed与watch

vue3响应式api

本节例子中代码使用的单文件组件语法

#computed

使用 getter 函数,并为从 getter 返回的值返回一个不变的响应式 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)


console.log(plusOne.value) // 2


plusOne.value++ // error

或者,它可以使用具有 getset 函数的对象来创建可写的 ref 对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})


plusOne.value = 1
console.log(count.value) // 0

类型声明:

// read-only
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>


// writable
function computed<T>(options: { get: () => T; set: (value: T) => void }): Ref<T>

#watchEffect

在响应式地跟踪其依赖项时立即运行一个函数,并在更改依赖项时重新运行它。

const count = ref(0)


watchEffect(() => console.log(count.value))
// -> logs 0


setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

类型声明:

function watchEffect(
  effect: (onInvalidate: InvalidateCbRegistrator) => void,
  options?: WatchEffectOptions
): StopHandle


interface WatchEffectOptions {
  flush?: "pre" | "post" | "sync"  // default: "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) => void


type StopHandle = () => void

参考watchEffect 指南

#watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的 data 源,并在单独的回调函数中副作用。默认情况下,它也是惰性的——即,回调是仅在侦听源发生更改时调用。

  • 与 watchEffect 比较,watch 允许我们:
    • 惰性地执行副作用;
    • 更具体地说明应触发侦听器重新运行的状态;
    • 访问侦听状态的先前值和当前值。

#侦听一个单一源

侦听器 data 源可以是返回值的 getter 函数,也可以是 ref:

// 侦听一个getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    
  }
)


// 直接侦听一个ref
const count = ref(0)
watch(count, (count, prevCount) => {
  
})

#侦听多个源

侦听器还可以使用数组同时侦听多个源:

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

#与 watchEffect 共享行为

watchwatchEffect 在手动停止,副作用无效 (将 onInvalidate 作为第三个参数传递给回调),flush timing 和 debugging 有共享行为。

类型声明:

// 侦听单一源
function watch<T>(
  source: WatcherSource<T>,
  callback: (
    value: T,
    oldValue: T,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options?: WatchOptions
): StopHandle


// 侦听多个源
function watch<T extends WatcherSource<unknown>[]>(
  sources: T
  callback: (
    values: MapSources<T>,
    oldValues: MapSources<T>,
    onInvalidate: InvalidateCbRegistrator
  ) => void,
  options? : WatchOptions
): StopHandle


type WatcherSource<T> = Ref<T> | (() => T)


type MapSources<T> = {
  [K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
}


// 参见 `watchEffect` 类型声明共享选项
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // default: false
  deep?: boolean
}

参考watch 指南

阅读全文
以上是编程学为你收集整理的vue3响应式api Vue 3.0 响应性API Computed与watch全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • vue使用模板 Vue 3.0 模板引用

    vue使用模板 Vue 3.0 模板引用

    2023-05-05 VUE3教程

    该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。尽管存在 prop 和事件,但有时你可能仍然需要直接...

  • vue3.0测试版 Vue 3.0 测试

    vue3.0测试版 Vue 3.0 测试

    2023-04-07 VUE3教程

    #介绍当构建可靠的应用时,测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多,...

  •  Sublime Text 概览

    Sublime Text 概览

    2023-03-31 Sublime Text 概览

    概览(Tour)基本概念(Basic Concepts)Sublime Text的界面如下:标签(Tab):无需介绍。编辑区(Editing Area):无需介绍。...

  •  Sublime Text 延伸阅读

    Sublime Text 延伸阅读

    2023-04-30

    延伸阅读(Further Reading)书籍(Books)Mastering Sublime Text:我读过的唯一一本关于Sublime Text的书籍,书中介绍的插件很...

  •  Sublime text3怎么关闭提示更新

    Sublime text3怎么关闭提示更新

    2023-05-15

    sublime text 3有新版本后,会不停地在每次启动后弹窗提示更新版本:由于种种原因,导致不想升级现有版本的ST3,但是被它的升级提...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部