创新互联VUE3教程：Vue3.0响应性APIComputed与watch

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

创新互联建站长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为昭阳企业提供专业的成都网站设计、网站建设，昭阳网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

#computed

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

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


console.log(plusOne.value) // 2


plusOne.value++ // error

或者，它可以使用具有 get 和 set 函数的对象来创建可写的 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(getter: () => T): Readonly>>


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

#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 共享行为

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

类型声明：

// 侦听单一源
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
): StopHandle


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


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


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

参考：watch 指南

分享标题：创新互联VUE3教程：Vue3.0响应性APIComputed与watch
标题链接：http://www.shufengxianlan.com/qtweb/news44/25744.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联