建设银行网站改手机号,建设农产品网站总结ppt,当前最好用的wordpress主题,怎么做宣传网站本节使用单文件组件语法作为代码示例 #计算值
有时我们需要依赖于其他状态的状态——在 Vue 中#xff0c;这是用组件计算属性处理的#xff0c;以直接创建计算值#xff0c;我们可以使用 computed 方法#xff1a;它接受 getter 函数并为 getter 返回的值返回一个不可变的… 本节使用单文件组件语法作为代码示例 #计算值
有时我们需要依赖于其他状态的状态——在 Vue 中这是用组件计算属性处理的以直接创建计算值我们可以使用 computed 方法它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。 const count ref(1)const plusOne computed(() count.value)console.log(plusOne.value) // 2plusOne.value // error
或者它可以使用一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。 const count ref(1)const plusOne computed({get: () count.value 1,set: val {count.value val - 1}})plusOne.value 1console.log(count.value) // 0#watchEffect
为了根据响应式状态自动应用和重新应用副作用我们可以使用 watchEffect 方法。它立即执行传入的一个函数同时响应式追踪其依赖并在其依赖变更时重新运行该函数。 const count ref(0)watchEffect(() console.log(count.value))// - logs 0setTimeout(() {count.value// - logs 1}, 100)#停止侦听
当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时侦听器会被链接到该组件的生命周期并在组件卸载时自动停止。
在一些情况下也可以显式调用返回值以停止侦听 const stop watchEffect(() {/* ... */})// laterstop()#清除副作用
有时副作用函数会执行一些异步的副作用这些响应需要在其失效时清除 (即完成之前状态已改变了) 。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参用来注册清理失效时的回调。当以下情况发生时这个失效回调会被触发 副作用即将重新执行时侦听器被停止 (如果在 setup() 或生命周期钩子函数中使用了 watchEffect则在组件卸载时)watchEffect(onInvalidate {const token performAsyncOperation(id.value)onInvalidate(() {// id has changed or watcher is stopped.// invalidate previously pending async operationtoken.cancel()})})
我们之所以是通过传入一个函数去注册失效回调而不是从回调返回它是因为返回值对于异步错误处理很重要。
在执行数据请求时副作用函数往往是一个异步函数 const data ref(null)watchEffect(async onInvalidate {onInvalidate(() {...}) // 我们在Promise解析之前注册清除函数data.value await fetchData(props.id)})
我们知道异步函数都会隐式地返回一个 Promise但是清理函数必须要在 Promise 被 resolve 之前被注册。另外Vue 依赖这个返回的 Promise 来自动处理 Promise 链上的潜在错误。 #副作用刷新时机
Vue 的响应性系统会缓存副作用函数并异步地刷新它们这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中组件的 update 函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时默认情况下会在所有的组件 update 前执行 templatediv{{ count }}/div/templatescriptexport default {setup() {const count ref(0)watchEffect(() {console.log(count.value)})return {count}}}/script
在这个例子中 count 会在初始运行时同步打印出来更改 count 时将在组件更新前执行副作用。
如果需要在组件更新后重新运行侦听器副作用我们可以传递带有 flush 选项的附加 options 对象 (默认为 pre) // fire before component updateswatchEffect(() {/* ... */},{flush: post})
flush 选项还接受 sync这将强制效果始终同步触发。然而这是低效的应该很少需要。 #侦听器调试
onTrack 和 onTrigger 选项可用于调试侦听器的行为。 onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用。onTrigger 将在依赖项变更导致副作用被触发时被调用。
这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger 语句来检查依赖关系 watchEffect(() {/* 副作用 */},{onTrigger(e) {debugger}})
onTrack 和 onTrigger 只能在开发模式下工作。 #watch
watch API 完全等同于组件侦听器 property。watch 需要侦听特定的数据源并在回调函数中执行副作用。默认情况下它也是惰性的即只有当被侦听的源发生变化时才执行回调。 与 watchEffect 比较watch 允许我们 懒执行副作用更具体地说明什么状态应该触发侦听器重新运行访问侦听状态变化前后的值。#侦听单个数据源
侦听器数据源可以是返回值的 getter 函数也可以直接是 ref // 侦听一个 getterconst state reactive({ count: 0 })watch(() state.count,(count, prevCount) {/* ... */})// 直接侦听refconst count ref(0)watch(count, (count, prevCount) {/* ... */})#侦听多个数据源
侦听器还可以使用数组同时侦听多个源 watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) {/* ... */})#与 watchEffect 共享的行为
watch 与 watchEffect共享停止侦听清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。
