vue计算属性和侦听器

2023-12-29 20:26:22

computed

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性

计算属性与methods区别:

computed是带缓存的,如果被依赖的变量不发生变化,则下次调用computed时不会重新计算结果。但是methods则是每次调用都会重新运行以得出实时的结果。

methods调用需要加()

import { computed, ref } from "vue";
export default {
? setup() {
? ? const count = ref(0); //声明
? ? const twofold = computed(() => {
? ? ? return count.value * 2;
? ? });
? ? return { count, twofold }
? }
}

watch?

(计算属性监测的是某个值的依赖的变化,侦听属性监测的是值自身的变化)

import { watch, ref } from "vue";
export default {
? setup() {
? ? const count = ref(0); //声明
? ? watch(count, (newData,oldData) => {
? ? ? // 逻辑代码
? ? })
? ? return { count };
? },
};

watch 的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组

const x = ref(0)
? ? const y = ref(0)

? ? // 单个 ref
? ? watch(x, (newX) => {
? ? ? console.log(`x is ${newX}`)
? ? })

? ? // getter 函数
? ? watch(
? ? ? () => x.value + y.value,
? ? ? (sum) => {
? ? ? ? console.log(`sum of x + y is: ${sum}`)
? ? ? }
? ? )

? ? // 多个来源组成的数组
? ? watch([x, () => y.value], ([newX, newY]) => {
? ? ? console.log(`x is ${newX} and y is ${newY}`)
? ? })

注意,你不能直接侦听响应式对象的属性值,例如

const obj = reactive({ count: 0 })

? ? // 错误,因为 watch() 得到的参数是一个 number
? ? watch(obj.count, (count) => {
? ? ? console.log(`count is: ${count}`)
? ? })
这里需要用一个返回该属性的 getter 函数:
? ? // 提供一个 getter 函数
? ? watch(
? ? ? () => obj.count,
? ? ? (count) => {
? ? ? ? console.log(`count is: ${count}`)
? ? ? }
? ? )

?

?

文章来源:https://blog.csdn.net/2301_79265530/article/details/135297668
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。