浅析Vue如何巧用computed计算属性

 更新时间:2023年06月09日 17:09:30   作者:田八  
在日常使用Vue开发项目的时候,计算属性computed是一个非常常用的特性,本文就来分享一些使用Vue的computed计算属性时的一些小技巧,希望能够帮助到大家

在日常使用Vue开发项目的时候,计算属性computed是一个非常常用的特性,它的主要作用是对数据进行处理,然后返回新的数据,这样就不需要在模板中写过多的逻辑代码,从而使得模板更加简洁,可读性更强。

今天我就来分享一些我在使用Vuecomputed计算属性时的一些小技巧,希望能够帮助到大家。

1. 计算属性的基本用法

计算属性的用法很简单,一同分为四个部分:gettersetteronTrackonTrigger

  • get:计算属性的getter函数,当计算属性的依赖发生改变时,会执行该函数,返回计算属性的值。
  • set:计算属性的setter函数,当直接修改计算属性的值时,会执行该函数。
  • onTrack:计算属性的依赖被追踪时,会执行该函数。
  • onTrigger:当计算属性的依赖项发生改变时,会执行该函数。

代码如下:

import { computed } from 'vue'
const count = ref(0)
const plusOne = computed({
    get() {
        return count.value + 1
    },
    set(val) {
        count.value = val - 1
    },
    onTrack(e) {
        debugger;
    },
    onTrigger(e) {
        debugger;
    }
});
console.log(plusOne.value) // 1
console.log(count.value) // 0
plusOne.value = 1
console.log(plusOne.value) // 2
console.log(count.value) // 1

这里我们最常用的就是get,可以简写如下:

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

onTrackonTrigger一般用于调试,当我们想要知道计算属性的依赖项发生了什么变化时,可以在这两个函数中打断点调试。

具体可参考官网:

在官网上给出了一些计算属性的使用场景,以及一些计算属性的注意事项,这里如果卷一些的话,可以看一下,下面我就来分享一些我在使用计算属性时的一些小技巧。

2. 计算属性的小技巧

2.1. 监听多个数据的变化

// 多个数据想要同时监听
const a = ref(1)
const b = ref(2)
const c = ref(3)
// 将其合并为一个计算属性
const multiply = computed(() => {
    return {
        a: a.value,
        b: b.value,
        c: c.value,
    }
})
// 监听计算属性的变化
watch(
    () => multiply.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
a.value = 2 // { a: 2, b: 2, c: 3 }
b.value = 3 // { a: 2, b: 3, c: 3 }
c.value = 4 // { a: 2, b: 3, c: 4 }

2.2. 监听对象的部分属性

const obj1 = ref({
    a: 1,
    b: 2,
    c: 3,
})
const obj2 = ref({
    a: 1,
    b: 2,
    c: 3,
})
// 监听对象的部分属性
const combine = computed(() => {
    return {
        a: obj1.value.a,
        b: obj2.value.b,
    }
})
// 监听计算属性的变化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
obj1.value.a = 2 // { a: 2, b: 2 }
obj1.value.b = 3 // 无输出
obj1.value.c = 4 // 无输出
obj2.value.a = 2 // 无输出
obj2.value.b = 3 // { a: 2, b: 3 }
obj2.value.c = 4 // 无输出

可以多个对象结合监听部分字段的变化,这样就不需要手动判断具体修改的是哪个对象的哪个字段了。

2.3. 监听数组的部分元素

const arr1 = ref([1, 2, 3])
const arr2 = ref([1, 2, 3])
// 监听数组的部分元素
const combine = computed(() => {
    return [
        arr1.value[0],
        arr2.value[1],
    ]
})
// 监听计算属性的变化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
arr1.value[0] = 2 // [2, 2]
arr1.value[1] = 3 // 无输出
arr1.value[2] = 4 // 无输出
arr2.value[0] = 2 // 无输出
arr2.value[1] = 3 // [2, 3]
arr2.value[2] = 4 // 无输出

对数组也可以像对象一样监听部分元素的变化。

2.4. 缓存与更新

// 这是一个大对象,我不需要它是响应式的,但是我需要它能响应式的更新
const list = new Array(100).fill(0).map((item, index) => ({key: index, value: item}))
// 强制刷新
const forceFlush = ref(0);
const cache = computed(() => {
    forceFlush.value; // 这里使用一下,什么都不干就行
    // 这里会对大对象进行一系列的计算,然后给结果缓存下来方便使用
    const cache = list.reduce((prev, curr) => {
        prev[curr.key] = curr;
        return prev
    }, {})
    // 这里就方便直接通过 key 获取
    return (key) => {
        return cache[key] || {}
    }
})
console.log(cache.value(0).value); // 0
// 这里是不会更新的
list[0] = {key: 0, value: 1};
console.log(cache.value(0).value); // 0
// 给一个刷新信号就可以了
forceFlush.value++;
console.log(cache.value(0).value); // 1

2.5. 双向绑定

const props = defineProps({
    modelValue: {
        type: String,
        default: ""
    }
});
const emit = defineEmits(["update:modelValue"]);
const value = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit("update:modelValue", val);
    }
});
value.value = 'hello';

双向绑定需要配合defineEmits(["update:modelValue"])来使用,每次调用emit("update:modelValue", val)很麻烦;

现在使用computed就可以实现value.value = value这种方式直接修改,很符合直观也满足了单向数据流的原则;

总结

在日常使用Vue中,合理的使用Vue的各种特性不仅能使开发效率加倍,同时也能使代码看起来更加整洁。

注意可以使用各种特性,但是不要炫技,够用好用就行,不要写出那种无人能撼动你的地位的代码,手动狗头。

以上就是浅析Vue如何巧用computed计算属性的详细内容,更多关于Vue computed的资料请关注脚本之家其它相关文章!

相关文章

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • vue懒加载和子组件懒加载的区别详解

    vue懒加载和子组件懒加载的区别详解

    这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue 实现input表单元素的disabled示例

    vue 实现input表单元素的disabled示例

    今天小编就为大家分享一篇vue 实现input表单元素的disabled示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue element-ui el-date-picker限制选择时间为当天之前的代码

    vue element-ui el-date-picker限制选择时间为当天之前的代码

    这篇文章主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue拦截器及请求封装代码

    vue拦截器及请求封装代码

    这篇文章主要介绍了vue拦截器及请求封装代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue本地打开build后生成的dist文件夹index.html问题

    vue本地打开build后生成的dist文件夹index.html问题

    这篇文章主要介绍了vue本地打开build后生成的dist文件夹index.html问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-09-09
  • Vue3实现登录表单验证功能

    Vue3实现登录表单验证功能

    这篇文章主要介绍了Vue3实现登录表单验证功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • vue下使用fullcalendar案例讲解

    vue下使用fullcalendar案例讲解

    这篇文章主要介绍了vue下使用fullcalendar及简单案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue2源码解析之自定义指令

    Vue2源码解析之自定义指令

    自定义指令,其实就是在vue提供的钩子中写代码,这篇文章将从源码的角度,带大家深入了解一下Vue2种自定义指令的实现与使用,需要的可以参考一下
    2023-05-05
  • fetch网络请求封装示例详解

    fetch网络请求封装示例详解

    这篇文章主要介绍了fetch网络请求封装的示例内容详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2021-11-11

最新评论