• 技术文章 >web前端 >前端问答

    vue中computed表示什么

    青灯夜游青灯夜游2022-07-25 16:42:58原创152

    在vue中,computed表示“计算属性”,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新。computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。computed计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    computed定义

    computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新

    computed用法

    一般情况下,computed默认使用的是getter属性

    0.png

    computed的响应式依赖(缓存)

    1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。下面代码中,计算属性fullName,它依赖了firstNamelastName这两个属性,只要它们其中一个属性变化,fullName就会重新执行。
    2.computed计算属性会被缓存,在下面代码中使用了两次fullName,但在控制台只输出了一次 “这是fullName”。

    <template>
      <div>
        <div>
          姓:<input type="text" v-model="firstName" />
        </div>
        <div>
          名:<input type="text" v-model="lastName" />
        </div>
        <!-- 调用两次fullName -->
        <div>姓名:{{ fullName }}</div>
        <div>姓名:{{ fullName }}</div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          firstName: "张",
          lastName: "三",
        };
      },
      computed: {
        fullName() {
            console.log("这是fullName");
            return this.firstName + this.lastName;
        }
      }
    };
    </script>

    computed 的工作原理

    要理解 computed 的工作原理,只需要理解下面三个问题

    1、computed 也是响应式的

    2、computed 如何控制缓存

    3、依赖的 data 改变了,computed 如何更新

    白话原理:

    computed的响应性

    不清楚什么是响应式,什么是订阅者watcher?可以先了解Vue响应式原理。

    简单的说:

    Computed 如何控制缓存

    我们都知道,computed 是有缓存的,官方已经说明。

    计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是 不会 被更新的。

    我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 get 函数。大量的计算将导致JS线程被占用,阻塞页面的渲染。

    那么在 Vue 中,computed 是如何判断是否使用缓存的呢?

    首先 computed 计算后,会把计算得到的值保存到一个变量(watcher.value)中。读取 computed 并使用缓存时,就直接返回这个变量。当 computed 更新时,就会重新赋值更新这个变量。

    TIP:computed 计算就是调用你设置的 get 函数,然后得到返回值。

    computed 控制缓存的重要一点是 【脏数据标志位 dirty】 dirty 是 watcher 的一个属性。

    缓存机制简述

    依赖的data变化,computed如何更新?

    简述Vue响应式原理

    computed的本质与data相似。当被使用时,会为其建立订阅者watcher,交给依赖项收集。如:当 A 引用 B 的时候,B 会收集 A 的watcher。

    场景设置

    现在 页面A 引用了 computed B,computed B 依赖了 data C。

    像是这样,A->B->C 的依赖顺序。

    那么,当 data C 变化,会发生什么呢?

    会是这样吗?

    一条链式的操作? C -> B -> A 这样的执行顺序吗?

    答案是否定的。

    其实真正的流程是,data C 开始变化后.......

    1.png

    为什么 data C 能通知 页面 A?

    data C 的依赖收集器会同时收集到 computed B 和 页面 A 的 watcher。

    为什么 data C 能收集到 页面A 的watcher?

    在 页面 A 在读取 computed B 的时候,趁机把 页面A 的watcher塞给了 data C ,于是 页面A watcher 和 data C 间接地关联在了一起,于是 data C 就会收集到 页面A watcher。

    至于具体的代码是怎么实现的,将会在下文源码分析中讲解。

    所以computed 如何更新?

    被依赖通知更新后,重置 脏数据标志位 ,页面读取 computed 时再更新值。

    白话总结

    【相关视频教程推荐:vuejs入门教程web前端入门

    以上就是vue中computed表示什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:computed Vue
    上一篇:jquery怎么获取前几个子元素 下一篇:构建vue-cli工程用到哪些技术
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 前端怎么埋点?浅析vue自定义指令进行前端埋点的方法• vue为什么只有一个根标签• 总结分享几个 VueUse 最佳组合,快来收藏使用吧!• 【整理分享】Vue开发必备的操作技巧,快来收藏吧!• vue服务端渲染和客户端渲染的区别是什么• vue中的webpack用什么安装
    1/1

    PHP中文网