这期内容当中小编将会给大家带来有关利用Vue3如何实现一个响应式侦听与计算功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
响应式侦听和计算
有时我们需要依赖于其他状态的状态——在 Vue 中,这是用组件 计算属性 处理的,以直接创建计算值,我们可以使用 computed
方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。
我们先来看看一个简单的例子,关于计算值的方式,同样我们在 src/TemplateM.vue
写下如下代码:
<template>
<div class="template-m-wrap">
count ---> {{count}}
plusOne ---> {{plusOne}}
</div>
</template>
<script>
import { ref, defineComponent, reactive, computed } from "vue";
export default defineComponent({
name: 'TemplateM',
setup() {
let count = ref(2)
let plusOne = computed(() => {
return count.value++
})
console.log(plusOne.value)
return {
count,
plusOne
}
}
})
</script>
访问链接效果如下:
我们可以看到 plusOne
没有值。或者,它可以使用一个带有 get
和 set
函数的对象来创建一个可写的 ref 对象。
<template>
<div class="template-m-wrap">
count ---> {{ count }} plusOne ---> {{ plusOne }}
</div>
</template>
<script>
import { ref, defineComponent, reactive, computed } from "vue";
export default defineComponent({
name: "TemplateM",
setup() {
let count = ref(2);
let plusOne = computed({
get() {
return count.value++;
},
set(val) {
count.value = val;
},
});
plusOne.value = 1;
console.log(count.value); // 0
return {
count,
plusOne,
};
},
});
</script>
同样访问效果如下:
watchEffect
为了根据响应式状态 自动应用 和 重新应用 副作用,我们可以使用 watchEffect
方法。它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
<template>
<div class="template-m-wrap">
count ---> {{ count }}
</div>
</template>
<script>
import { ref, defineComponent, reactive, computed, watchEffect } from "vue";
export default defineComponent({
name: "TemplateM",
setup() {
let count = ref(2);
watchEffect(() => {
console.log(count.value)
})
setTimeout(() => {
count.value++
}, 1000)
return {
count,
};
},
});
</script>
查看效果如下:
停止侦听
当 watchEffect
在组件的 setup() 函数或 生命周期钩子 被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。
在一些情况下,也可以显式调用返回值以停止侦听:
<template>
<div class="template-m-wrap">
count ---> {{ count }}
</div>
</template>
<script>
import { ref, defineComponent, reactive, computed, watchEffect } from "vue";
export default defineComponent({
name: "TemplateM",
setup() {
let count = ref(2);
const stopWatch = watchEffect(() => {
console.log(count.value)
})
stopWatch()
setTimeout(() => {
count.value++
}, 1000)
return {
count,
};
},
});
</script>
查看效果如下:
副作用刷新时机
Vue 的响应性系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个“tick” 中多个状态改变导致的不必要的重复调用。在核心的具体实现中,组件的 update
函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时,默认情况下,会在所有的组件 update
前 执行:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
setup() {
const count = ref(0)
watchEffect(() => {
console.log(count.value)
})
return {
count
}
}
}
</script>
在这个例子中:
count
会在初始运行时同步打印出来count
时,将在组件 更新前 执行副作用。如果需要在组件更新 后 重新运行侦听器副作用,我们可以传递带有 flush
选项的附加 options
对象 (默认为 'pre'
):
// fire before component updates
watchEffect(
() => {
/* ... */
},
{
flush: 'post'
}
)
flush
选项还接受 sync
,这将强制效果始终同步触发。然而,这是低效的,应该很少需要。
侦听器调试
onTrack
和 onTrigger
选项可用于调试侦听器的行为。
这两个回调都将接收到一个包含有关所依赖项信息的调试器事件。建议在以下回调中编写 debugger
语句来检查依赖关系:
watchEffect(
() => {
/* 副作用 */
},
{
onTrigger(e) {
debugger
}
}
)
onTrack
和 onTrigger
只能在开发模式下工作。
watch
watch
API 完全等同于组件侦听器 property。 watch
需要侦听特定的数据源,并在回调函数中执行副作用。默认情况下,它也是惰性的,即只有当被侦听的源发生变化时才执行回调。
与watchEffect 比较, watch
允许我们:
侦听单个数据源
侦听器数据源可以是返回值的 getter 函数,也可以直接是 ref
:
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
上述就是小编为大家分享的利用Vue3如何实现一个响应式侦听与计算功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。